slick(슬릭) 슬라이더 정지, 재생 버튼 추가하는 함수 (스위치) addClass, removeClass

Mori·2022년 4월 12일
2

슬라이더

목록 보기
1/2

클래스 추가하는 함수

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;

}

이 방법은 슬릭에서만 쓰인다.
스와이퍼는 다른 방법으로 적용된다.

0개의 댓글