제이쿼리 질문입니다ㅠㅠ(슬릭슬라이더)
본문
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를 다 지워라
이게 잘 안먹습니다 ㅠ
답변을 작성하시기 전에 로그인 해주세요.
