[JAVASCRIPT/JQUERY]이미지슬라이드 플러그인 slick 옵션 설정하는 법(사용법)

일단 가장먼저 필요한건 slick의 기본 css 와 js 파일이 필요하고,

또한 jquery 파일도 필요하다.

<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>
				

 

옵션값 설정하는 방법 

$("#slick").slick({  
        infinite: true , /* 맨끝이미지에서 끝나지 않고 다시 맨앞으로 이동 */
        slidesToShow: 1, /* 화면에 보여질 이미지 갯수*/
       slidesToScroll: 1,  /*  스크롤시 이동할 이미지 갯수 */
        autoplay: true, /* 자동으로 다음이미지 보여주기 */
        arrows: true, /* 화살표  */
        dots:true, /*  아래점  */
        autoplaySpeed:10000,/* 다음이미지로 넘어갈 시간 */
        speed:1000 , /* 다음이미지로 넘겨질때 걸리는 시간 */
        pauseOnHover:true, /*  마우스 호버시 슬라이드 이동 멈춤 */
       //vertical:true,/*  세로방향으로 슬라이드를 원하면 추가하기// 기본값 가로방향 슬라이드*/
       responsive: [
         { /* 반응형웹*/
                 breakpoint: 960, /*  기준화면사이즈 */
                 settings: {slidesToShow:2 } /*  사이즈에 적용될 설정 */
          },
          { /* 반응형웹*/
                 breakpoint: 768, /*  기준화면사이즈 */
                 settings: {slidesToShow:1 } /*  사이즈에 적용될 설정 */
          }
        ]
      });

 

 

 

슬릭 이전,다음으로 이동 버튼이나, 아래 점으로 표현하는 부분 CSS 수정

/* 화살표 */
.slick-arrow{
  z-index: 2; /* prev버튼은 위치 이동시 이미지 뒤로 숨겨짐 */
  position:absolute;  /* 원하는 위치에 지정  */
  top: 50%; 
  width: 50px; 
  height: 50px; 
  transform: translateY(-25px);
}
.slick-prev.slick-arrow{ /* prev 이전 */
	left: 0;
}
.slick-next.slick-arrow{ /* next 다음 */
	right: 0;
}

/* 아래점 */
.slick-dots{ 
	text-align: center;
}
.slick-dots li{
  display: inline-block; 
  margin: 0 5px;
}

 

 

https://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

슬릭사이트의 예제를 참고해도 손쉽게 만들 수 있다.

 

 

 

 

- slick에 애니메이션을 이용해 상태바 만들기

[javascript/javascript] - [자바스크립트플러그인]slick progressbar 만들기

 

 

 

 

- 또다른 이미지 플러그인 추천

[javascript/javascript] - [자바스크립트 플러그인]모바일 최적화(터치기능) 반응형 이미지 슬라이드 모달(팝업)창 플러그인