채택완료

슬라이드 특정날짜에 가리는법

Copy
<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개 / 댓글 2개

채택된 답변
+20 포인트

사실 저런것은 관리자에서 설정할 수 있도록 개발하는게 통상적입니다만 일회성 작업이라면 아래처럼 하시는게 좋을것 같습니다.

 

<?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 } ?>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

아 제가 내용에 기재를 못했는데 제작하는 홈페이지 사이트가 php기반이 아니라서
혹시 자바스크립트로 알려주실 수 있을까요? 일회성 작업입니다
자바스크립트로만 하면 복잡해지는데 swiper-slide 를 사용중이므로

해당 페이지에서 자바스크립트로만 날짜를 비교하여 슬라이드 div 를 없앴을 시 로드시간에 따라 오류가 날 수도있습니다.

swiper 가 로딩되기전의 이벤트에 구현 해주시는게 좋을것 같습니다.

https://swiperjs.com/swiper-api#event-beforeInit


자바스크립트로 해당 이벤트안에 날짜를 비교하여 슬라이드 엘레멘트를 지워주시는 스크립트를 구현하시면 됩니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고