slick 슬라이더

<!-- 이 예제에서는 필요한 js, css 를 링크걸어 사용 -->

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

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

CSS

.product {width: 1048px;margin: 0 auto;} // 전체적인 width 설정

.product .slick-prev.slick-arrow {position: absolute;left: -85px;top: 50%;transform: translateY(-50%);background: url(/img/bx_left.png);display: hidden;text-indent: -9999px;width: 60px;height: 60px;background-size: cover;}

.product .slick-next.slick-arrow {position: absolute;right: -85px;top: 50%;transform: translateY(-50%);background: url(/img/bx_right.png);display: hidden;text-indent: -9999px;width: 60px;height: 60px;background-size: cover;}

// 화살표 방향 설정

HTML

<div class="클래스 설정">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

자바스크립트

$(document).ready(function () {

$('.product').slick({

slidesToShow: 4,

slidesToScroll: 1,

autoplay: true,

autoplaySpeed: 5000,

dots: false,

 

responsive: [{

breakpoint: 1024,

settings: {

slidesToShow: 2,

}

},

{

breakpoint: 600,

settings: {

slidesToShow: 1,

}

},

{

breakpoint: 300,

settings: "unslick"

}

]

});

 

슬릭 슬라이드 옵션

infinite: true , /* 맨끝이미지에서 끝나지 않고 다시 맨앞으로 이동 */  

slidesToShow: 1, /* 화면에 보여질 이미지 갯수*/      

slidesToScroll: 1,  /* 스크롤시 이동할 이미지 갯수 */      

autoplay: true, /* 자동으로 다음이미지 보여주기 */      

arrows: true, /* 화살표 */     

dots:true, /* 아래점 */  

autoplaySpeed:10000,/* 다음이미지로 넘어갈 시간 */  

speed:1000 , /* 다음이미지로 넘겨질때 걸리는 시간 */  

pauseOnHover:true, /* 마우스 호버시 슬라이드 이동 멈춤 */  

vertical:true,/* 세로방향으로 슬라이드를 원하면 추가하기//

infinite: true, //양방향 무한 모션
speed:300, // 슬라이드 스피드
autoplay: true, //자동플레이 유무( false시 자동플레이 안됨 )
autoplaySpeed:4000, // 자동플레이 스피드

asNavFor: '.slider-nav', slidesToShow: 3, //한 화면에 보여줄 아이템수

$('.slider-for').slick({  // asnavfor 슬라이드 2개연결
          asNavFor: '.slider-nav',
 });

$('.slider-nav').slick({
          asNavFor: '.slider-for',
          focusOnSelect: true,
 });

slidesToScroll: 3 // 한번에 슬라이드 시킬 아이템 개수
arrows: false, //좌우 화살 버튼 노출 여부 ( false 시 안보임 )

출처: https://uxicode.tistory.com/entry/slickjs [세줄코딩]