[API] slick 슬라이더

slick 슬라이더 API

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

slick - the last carousel you'll ever need

- slick slider는 반응형 웹을 지원하는 슬라이더 라이브러리다.

slick 다운로드 및 js, css 파일 로드

- slick 홈페이지에 들어가서 get it now을 눌러서  js, css 파일을 다운 받거나 링크를 복사해서 로드하면 된다.

CSS

<link rel="stylesheet" type="text/css" href="/plugin/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/plugin/slick/slick-theme.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="/js/jquery.js"></script>
<script type="text/javascript" src="/plugin/slick/slick.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

기본 사용법

- 기본적으로 사용법은 위에 링크를 들어가면 종류별로 다 나와있다. 그것을 참고해서 사용하면 된다.

- 여기서는 기본적인 코드가 어떤 것을 의미하는 지 작성하겠다.

<script>
    $(function(){
        $('#slider-div').slick({
            slide: 'div',		//슬라이드 되어야 할 태그 ex) div, li 
            infinite : true, 		//무한 반복 옵션	 
            slidesToShow : 4,		// 한 화면에 보여질 컨텐츠 개수
            slidesToScroll : 1,		//스크롤 한번에 움직일 컨텐츠 개수
            speed : 100,	 	// 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
            arrows : true, 		// 옆으로 이동하는 화살표 표시 여부
            dots : true, 		// 스크롤바 아래 점으로 페이지네이션 여부
            autoplay : true,		// 자동 스크롤 사용 여부
            autoplaySpeed : 10000, 	// 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
            pauseOnHover : true,	// 슬라이드 이동	시 마우스 호버하면 슬라이더 멈추게 설정
            vertical : false,		// 세로 방향 슬라이드 옵션
            prevArrow : "<button type='button' class='slick-prev'>Previous</button>",		// 이전 화살표 모양 설정
            nextArrow : "<button type='button' class='slick-next'>Next</button>",		// 다음 화살표 모양 설정
            dotsClass : "slick-dots", 	//아래 나오는 페이지네이션(점) css class 지정
            draggable : true, 		//드래그 가능 여부 
            responsive: [ 		// 반응형 웹 구현 옵션
                {  
                    breakpoint: 960, 	//화면 사이즈 960px
                    settings: {		//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
                        slidesToShow:3 
                    } 
                },
                { 
                    breakpoint: 768,	//화면 사이즈 768px
                    settings: {		//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
                        slidesToShow:2 
                    } 
                }
            ]

        });
    })
</script>

예시

- 위에서 말했듯이 링크에 들어가보면 상황에 맞게 슬라이더 코드들이 있다.

- 상황에 맞게 코드를 분석해서 사용하면 된다.

<div class="card-main main-movie">
    <c:forEach items="${movieLists.movies}" var="movie" varStatus="status">
        <div class="main">
            <a href="${cp}/movie/movieInfo?moviecode=${movie.moviecode}">
                <img src="${movie.movieimg }" alt="img">
                <span class="title">${movie.movietitle }</span>
                <span class="year-nation">
                    ${movie.movierelease } ・ ${movie.movienation}
                </span>
                <span class="rate">평균 ★${movie.moviestar }</span>
            </a>
        </div>			
    </c:forEach>
</div>

$('.main-movie').slick({
  infinite: false,
  arrows : true,
  draggable : false,
  speed: 300,
  slidesToShow: 6,
  slidesToScroll: 6,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});