제이쿼리 질문입니다ㅠㅠ(슬릭슬라이더)

제이쿼리 질문입니다ㅠㅠ(슬릭슬라이더)

QA

제이쿼리 질문입니다ㅠㅠ(슬릭슬라이더)

답변 1

본문

slider에 active를 지우려고하는데

맨위 기본 active가 삭제가 안되고 그다음부터 삭제가 됩니다 ㅠ

조언 좀 부탁드릴게요 ㅠ

html


<div class="main_slide_wrap">
    <div class="main_slide pc_on">
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/main_slide1.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/main_slide2.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/main_slide3.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/main_slide4.jpg" alt=""></div>
    </div>
    <div class="main_slide mo_on">
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/mobile/main_slide1.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/mobile/main_slide2.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/mobile/main_slide3.jpg" alt=""></div>
        <div><img src="<?php echo G5_THEME_IMG_URL ?>/mobile/main_slide4.jpg" alt=""></div>
    </div>
    <div class="main_slide_btn mon">
        <a href="#none" data-slide="1" class="active">
            <span class="slide_circle"></span><span>01</span>
        </a>
        <a href="#none" data-slide="2">
            <span class="slide_circle"></span><span>02</span>
        </a>
        <a href="#none" data-slide="3">
            <span class="slide_circle"></span><span>03</span>
        </a>
        <a href="#none" data-slide="4">
            <span class="slide_circle"></span><span>04</span>
        </a>
    </div>
</div>

 

JS


    $('.main_slide').on('afterChange', function(event, slick, currentSlide, nextSlide){ //슬라이드가 바뀔때
        var slide_no_pc =  $('.pc_on .slick-active').data('slick-index')+1; // 활성화 된 슬라이드의 data + 1
        var slide_no_mo = $('.mo_on .slick-active').data('slick-index')+1; // 활성화 된 슬라이드의 data + 1
        $('[data-slide]').removeClass('active'); //data-slide(탭)를 갖고있는 active를 다 지워라
        $('[data-slide='+slide_no_pc+']').addClass('active'); // data-slide와 data-slick-index를 비교하여 동일하다면 addClass
        $('[data-slide='+slide_no_mo+']').addClass('active'); // data-slide와 data-slick-index를 비교하여 동일하다면 addClass
    });

 

결론:

$('[data-slide]').removeClass('active'); //data-slide(탭)를 갖고있는 active를 다 지워라

이게 잘 안먹습니다 ㅠ

 

 

 

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 1,020
© SIRSOFT
현재 페이지 제일 처음으로