슬라이드 특정날짜에 가리는법
본문
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:;"><img src="/img/m_4.png" alt=""></a>
</div>
<div class="swiper-slide si_1">
<a href="javascript:;"><img src="/img/m_1.png" alt=""></a><!--5월 21일까지-->
</div>
<div class="swiper-slide si_2">
<a href="javascript:;"><img src="/img/m_3.png" alt=""></a><!--5월 20일까지-->
</div>
</div>
<div class="swiper-pagination"></div>
</div>
위와같은 소스가 있는데 주석에 있는것처럼 5월 20일까지,21일까지 나오다가 hide 시키고 싶은데
방법 공유해주실분 계실까요?
답변 1
사실 저런것은 관리자에서 설정할 수 있도록 개발하는게 통상적입니다만 일회성 작업이라면 아래처럼 하시는게 좋을것 같습니다.
<?php
if(strtotime('2022-05-21') > strtotime(date('Y-m-d'))){
?>
<div class="swiper-slide si_1"> <a href="javascript:;"><img src="/img/m_1.png" alt=""></a><!--5월 21일까지--> </div>
<?php } ?>
아 제가 내용에 기재를 못했는데 제작하는 홈페이지 사이트가 php기반이 아니라서
혹시 자바스크립트로 알려주실 수 있을까요? 일회성 작업입니다
자바스크립트로만 하면 복잡해지는데 swiper-slide 를 사용중이므로
해당 페이지에서 자바스크립트로만 날짜를 비교하여 슬라이드 div 를 없앴을 시 로드시간에 따라 오류가 날 수도있습니다.
swiper 가 로딩되기전의 이벤트에 구현 해주시는게 좋을것 같습니다.
https://swiperjs.com/swiper-api#event-beforeInit
자바스크립트로 해당 이벤트안에 날짜를 비교하여 슬라이드 엘레멘트를 지워주시는 스크립트를 구현하시면 됩니다.
답변을 작성하시기 전에 로그인 해주세요.
