slick 슬라이더 API
https://kenwheeler.github.io/slick/
- 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
}
}
]
});
'API' 카테고리의 다른 글
[API] 카카오맵 API (0) | 2022.08.18 |
---|---|
[API] 문자메시지 API(coolsms) (0) | 2022.08.18 |
[API] 주소 찾기 API(카카오 우편번호 서비스) (0) | 2022.05.26 |
[API] API란? (0) | 2022.05.24 |