2018. 5. 10. 23:12
반응형
https://github.com/kenwheeler/slick/
위 링크에서 slick.css, slick.min.js, slick-theme.css 를 다운받아서 진행해야 한다.
그리고 jQuery도 필요하다.
slick-theme.css는 없어도 아래 예제는 잘 작동할 것으로 보이긴 한다.
다운 받은 파일들과 같은 폴더에 html 파일을 하나 만들고 다음과 같이 작성하고 실행하면 된다.
사진은 내가 그동안 찍은 사진들 중에서 몇개 골라서 진행한다.
보다 자세한 사용법은 http://kenwheeler.github.io/slick/ 사이트를 참조하면 될듯
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
<style>
#banner img{
height: 200px;
}
</style>
</head>
<body>
<div id="banner">
<div><img src="https://4.bp.blogspot.com/-Fyuq44OQYZM/WiawI1CNkbI/AAAAAAAAKb4/VLnqW6T8lQ8N7TGqrjZfD9G8SIRoc3gpwCLcBGAs/s1600/20171201_213324.jpg"/></div>
<div><img src="https://1.bp.blogspot.com/-pmXVIMd9jgA/WZB7RT_rQNI/AAAAAAAAKYA/aG5f9pC0SwQtoNdtJLajF3JQLuk41sDqgCLcBGAs/s1600/20170812_120145.jpg"/></div>
<div><img src="https://3.bp.blogspot.com/-AUaJHqEsoVw/WZB3L73vPWI/AAAAAAAAKXg/jkoNzPLi4UsUyCx60bi5xuhUx3Otp6VdACLcBGAs/s1600/20170810_224642.jpg"/></div>
<div><img src="https://4.bp.blogspot.com/-Lu0_ygKIPlw/WFTuQhdKL0I/AAAAAAAAKKw/-CGeWGGLWhoOzQkAXpzSB_34MD9SfEfMgCLcB/s1600/IMG_20161217_143939.jpg"/></div>
<div><img src="https://1.bp.blogspot.com/-ByFwtUU5T2E/WFH5alk02RI/AAAAAAAAC3c/DX94eIXUZG4U3o2MdHa3Wn-OVBQ5Kkx-ACKgB/s1600/IMG_20161203_161913.jpg"/></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<script>
$(document).ready(function(){
$("#banner").slick({
vertical: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
verticalSwiping: true
});
});
</script>
</html>반응형
'dev' 카테고리의 다른 글
| [JavaScript] 특정 웹페이지에서 원하는 자바스크립트 실행 (0) | 2018.05.31 |
|---|---|
| [Spring] 스프링프레임워크 크로스도메인 허용 (0) | 2018.05.25 |
| [Spring/JSP] HttpServletRequest 모든 파라미터 출력하기 (2) | 2018.05.18 |
| [JavaScript] 클립보드로 텍스트 복사하기 (0) | 2018.05.18 |
| [Java/Spring] 스프링 메일 보내기 (0) | 2018.05.09 |
| [Javascript] Pubnub 채팅 서비스를 이용해 채팅창 구현하기 (0) | 2018.04.22 |
| [Linux] 리눅스 서버의 파일 tomcat의 webapps에서 사용하기 (0) | 2018.04.20 |
| [Spring] 스프링에서 채팅 구현하기 (0) | 2018.04.18 |