스와이프되는 슬라이드를 엄청나게 찾다가 알게된 slick slider
사용법도 간단한 편이다.
일단 여기서 파일을 다운 받아준다.
헤드에 추가해줄것
<head>
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
</head>
본문 코드
<div class="family_swiper">
<div><a href=""><img src="img/f01.png"></a></div>
<div><a href=""><img src="img/f02.png"></a></div>
<div><a href=""><img src="img/f03.png"></a></div>
<div><a href=""><img src="img/f04.png"></a></div>
</div>
<script type="text/javascript" src="js/slick.min.js"></script>
<script>
$(document).ready(function(){
$('.family_swiper').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
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
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
</script>
slick slider는 특별하게 class명을 지켜줘야 되는 것 없이
내가 원하는 클래스명을 사용하고 아래 script에 해당 클래스명을 넣어주면
내가 지정한 class의 자식 div요소들을 슬라이드 가능하게 해준다.
내가 사용한 슬라이드는 respansive slider로 브라우저 크기에 맞춰 요소 갯수를 조절해주는 것인데
아래 사이트에 들어가보면 여러 데모가 준비되어 있고 사용법도 제공되어 있으니 복붙만 해주면 간단히 사용할 수 있다.
http://kenwheeler.github.io/slick/
반응형
'디자인 정보' 카테고리의 다른 글
| [jQuery] 제이쿼리 셀렉트박스 플러그인 select box / select option / dropdown / jQuery selectbox plugin (0) | 2021.03.02 |
|---|---|
| 디자이너를 위한 웹사이트 책갈피 (0) | 2020.09.08 |
| [css] box-shadow (0) | 2020.06.11 |
| [css] 글자 아래 밑줄 생기는 hover effect (0) | 2020.06.11 |
| [css] 스프라이트 이미지 사용하기 (0) | 2020.04.21 |