1. 파일 다운
다운로드 링크
slick - the last carousel you'll ever need (kenwheeler.github.io)
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
kenwheeler.github.io
라이브러리 다운 : get it now > download now
zip 파일이 다운로드 된다.
압축 해제 후 slick-1.8.1\slick-1.8.1\slick 경로에서
위 세 파일을 사용하게 된다.
1) slick.min.js
2) slick-theme.css
3) slick.css
파일을 다운받고 싶지 않을 경우 간편하게 cdn을 이용해도된다.
2. 데모 선택
https://kenwheeler.github.io/slick/#demos
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
kenwheeler.github.io
데모들 중 원하는 스타일을 고른다.
각 데모 샘플들에는 샘플 코드가 같이 있는데,
예를 들어 autoplay 데모를 사용할 경우
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});위의 샘플 코드에서 .autoplay라는 클래스명을 변경하면 안된다.
위의 형식을 유지하되, 내부 상세 항목(slidesToShow등)만 변경해야한다.
속성 설명:
slidestoshow: 화면에 총 몇개의 슬라이드를 보일건지 (이미지 수가 n개더라도 화면에 한번에 한 이미지만 보여지게 슬라이드하고싶다면 1로 설정하면 된다.)
autoplay: 자동으로 넘어가게 해주는 것에 대한 속성 (t/f)
autoplaySpeed: 2000 (milisecond) (=2초). 슬라이드 넘어가는 시간.
슬라이드 및에 점이나 화살표같은 속성에대해 설정하고싶다면
dots: true,
arrows: false,
위와 같은 속성들을 추가해주면 된다.
3. 소스 작성
1) <head>내
<link rel="stylesheet" type="text/css" href="{파일경로}/css/slick.css"/>
<link rel="stylesheet" type="text/css" href="{파일경로}/css/slick-theme.css"/>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript" src="{파일경로}/slick.min.js"></script>
다음과 같이 js,css 파일 명시를 해준다.
이때 slick.min.js는 제이쿼리 아래 위치시킨다.
제이쿼리는 1.7버전 이상 사용이 필요하다.
2) <body>내 본문작성
<div class="autoplay">
<div>
<a href="..." target="_blank">
<img src="../img_1.png" alt="">
</a>
</div>
<div>
<a href="..." target="_blank">
<img src="../img_2.png" alt="">
</a>
</div>
</div>예시 html 코드이다.
div 영역이 슬라이드 되기 때문에
사진을 넣을 경우 div내에 img 태그를 넣어준다.
해당 사진div들의 상단을 autoplay 클래스를 명시한 div로 묶는다.
이후의 css 들은 두개의 css 파일을 수정해가며 고치면 된다.
'programming > js' 카테고리의 다른 글
| 버튼 클릭 시 alert (0) | 2023.06.15 |
|---|---|
| [javascript] form 엔터키 submit event (0) | 2023.05.03 |
| [js] 스크립트 변수 form의 value로 보내기 (0) | 2023.02.23 |
| [js] 팝업 띄우기 (0) | 2023.01.06 |
