클래스 추가하는 함수
addClass('클래스명')
클래스를 제거하는 함수
removeClass('클래스명')
제이쿼리 재생 정지버튼 할때 함수에 쓰임
<div class="btn">
<button type="button" class="btn_pause">
play
</button>
</div>
<script>
$(function(){
$('.product_list').slick({
autoplay: true, //자동실행
dots:true, //페이지버튼
arrows: false, //좌우버튼
// fade:true,
pauseOnHover:true, //마우스호버시 일시정지
slidesPerRow:2, //요소 안에 볼 슬라이드 갯수
// slidesToScroll:2, //배너 스크롤 갯수
autoplaySpeed:2000 //자동실행 지연시간
});
var sw = 0;
$('.btn_pause').click(function(){
if(sw==0){
$('.btn_pause').addClass('on');
$('.product_list').slick('slickPause')
sw = 1;
}else{
$('.btn_pause').removeClass('on');
$('.product_list').slick('slickPlay')
sw = 0;
}
});
});
</script>
// CSS에 .on 붙여쓰기 (띄어쓰기 X)
.section2 .product .btn .btn_pause{
background:url('../images/btn_rolling_s_stop.png')no-repeat;
width: 10px; height: 10px;
text-indent: -9999px;
border:none;
cursor: pointer;
outline: none;
}
.section2 .product .btn .btn_pause.on{ //붙여쓰기
background: url('../images/btn_rolling_s_play.png')no-repeat;
width: 10px; height: 10px;
text-indent: -9999px;
border:none;
cursor: pointer;
outline: none;
}
이 방법은 슬릭에서만 쓰인다.
스와이퍼는 다른 방법으로 적용된다.