[JavaScript]슬릭 슬라이더 !!!!!

슬릭슬라이더 메인

슬라이더 플러그인중 개인적으로는

사용하기 가장 쉬운 슬라이드인 '슬릭슬라이더' 사용법을 간단하게 소개하려합니다.

(슬릭슬라이더는 라이센스 비용이 있는걸로 기억합니다... 개인 포트폴리오용으로 사용하시면 좋을듯 하네요)

 

 

 

<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 
<!-- Slick 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

위에부분을 HTML에 복사 -> 붙여넣기!

 

 

    <!-- stlye 은 slick 영역 확인용 -->
    <div style="padding:300px 100px; background-color: skyblue;">
          <div id="slider-div"  >
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
          </div>
    </div>

 

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

JavaScript 부분에 추가!

 

-HTML 및 JavaScrpt 출처 : https://programmer93.tistory.com/34

slick slider 사용법 및 옵션 (반응형 포함) - 개발자 삽질 일기

-슬릭슬라이더 홈페이지 : kenwheeler.github.io/slick/

slick - the last carousel you'll ever need