제이쿼리 slick 슬라이드 만들기

slick 슬라이드 란?

반응형 슬라이드이며, 무료로 사용가능한 제이쿼리 슬라이드입니다.

slick 슬라이드 적용 방법

CDN으로 사용

CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">

JS

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

다운로드하여 사용

https://github.com/kenwheeler/slick/

반응형 옵션 예시 Responsive Option Example

$(".slider").slick({

  // normal options...
  infinite: false,

  // the magic
  responsive: [{

      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        infinite: true
      }

    }, {

      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }

    }, {

      breakpoint: 300,
      settings: "unslick" // destroys slick

    }]
});

slick 슬라이드 커스터마이징 css

/* slick 플러그인 */
.slick-slider .slick-list {display:block; overflow-x:hidden; overflow-y:hidden; position:relative}
.slick-slider .slick-list.dragging {cursor:pointer}
.slick-slider .slick-list .slick-track {display:block; position:relative; top:0; left:0}
.slick-slider .slick-list .slick-track:before, .slick-slider .slick-list .slick-track:after {display:table; content:''}
.slick-slider .slick-list .slick-track:after {clear:both}
.slick-slider .slick-list.slick-loading .slick-track {visibility:hidden}
.slick-slider .slick-list .slick-track .slick-slide {display:none; float:left}
.slick-slider[dir='rtl'] .slick-list .slick-track .slick-slide {float:right}
.slick-slider .slick-list .slick-track .slick-slide img {display:inline-block}
.slick-slider .slick-list .slick-track .slick-slide.slick-loading img {display:none}
.slick-slider.slick-initialized .slick-list .slick-track .slick-slide {display:block}
.slick-slider .slick-list .slick-track.slick-loading .slick-slide {visibility:hidden}
.slick-slider .slick-arrow.slick-hidden {display:none}

슬라이드 버튼 변경, 카운드다운 추가

$( document ).ready( function() {

	var $bannerSlide = $('.banner_list_area .banner_list_wrap'),
	$bannerList = $bannerSlide.children('.banner_list'),
	$bannerControl = $bannerSlide.children('.banner_control'),
	$bannerControlNext = $bannerControl.children('.btn_next'),
	$bannerControlPrev = $bannerControl.children('.btn_prev'),
	$bannerControlPause = $bannerControl.children('.btn_pause'),
	$bannerControlPlay = $bannerControl.children('.btn_play'),
	$addUp = $('.banner_list_area .banner_list_wrap .count'),
	$addUpCnt = $('.banner_list_area .banner_list_wrap .count .cnt'),
	$addUpAll = $('.banner_list_area .banner_list_wrap .count .all');

	$bannerList.on('init.main reInit.main afterChange.main', function(event, slick, currentSlide, nextSlide) {
		var i = (currentSlide ? currentSlide : 0) + 1;

		$addUpCnt.text(i);
		$addUpAll.text(slick.slideCount);
	});

	$bannerList.slick({
		draggable : false,
		swipe : false,
		slidesToShow : 1,
		autoplay : true,
		autoplaySpeed : 4000,
		arrows : true,
		prevArrow : $bannerControlPrev,
		nextArrow : $bannerControlNext,
		pauseOnDotsHover : true,
		responsive: [{
			breakpoint : 1024,
			settings : {
				draggable : true,
				swipe : true
			}
		}]
	});

	$bannerControlPause.on('click.main', function(event) {
		$bannerControlPause.hide();
		$bannerControlPlay.show().focus();
		$bannerList.slick('slickPause').slick('slickSetOption', 'pauseOnDotsHover', false);
	});

	$bannerControlPlay.on('click.main', function(event) {
		$bannerControlPause.show().focus();
		$bannerControlPlay.hide();
		$bannerList.slick('slickPlay').slick('slickSetOption', 'pauseOnDotsHover', true);
	});

});

혹시 영상이 도움 되었다면 유튜브 채널오셔서 다양한 정보 보시고

구독과 좋아요 부탁드립니다.

 

감사합니다.

 

스톤모두 유튜브 무료 강의 : https://www.youtube.com/channel/UCZUPZrlC-A8u4Y8KbU0HUvQ?sub_confirmation=1

스톤모두 네이버 스토어 : https://smartstore.naver.com/stonemodoo

스톤모두 모두홈페이지 : https://stone.modoo.at/

스톤모두 워드프레스 홈페이지 : https://stonemodoo.com/