Carousel 기능을 구현할 수 있는 Slick을 시도했습니다.
3409 단어 jQuery
공식 사이트는 아래의 사이트에서 조회할 수 있다.
사이트 제목
http://kenwheeler.github.io/slick/
페이지 하단의'노드 다운로드'단추에서 필요한 파일을 다운로드할 수 있습니다.
다운로드한 Zip의 압축을 풀고 싶으면 slick 폴더가 있는지 확인할 수 있습니다.
이 slick 폴더에 필요한 파일이 있는 것 같습니다.
가장 간단한 패턴이지만 아래 코드로 동작을 확인했습니다.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
</head>
<body>
<div class="single-item">
<div>your content 1</div>
<div>your content 2</div>
<div>your content 3</div>
</div>
<script>
$(document).ready(function(){
$('.single-item').slick();
});
</script>
</body>
</html>
샘플처럼 단추를 표시하지 않았지만 한쪽을 누르면서 가로로 미끄러지면 your content2와 your content3로 전환할 수 있습니다.
잠시 동작을 확인했기 때문에 이후 공식 사이트에 기재된 샘플 코드를 보면서 맞춤형으로 제작할 수 있다.
Reference
이 문제에 관하여(Carousel 기능을 구현할 수 있는 Slick을 시도했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tyoshikawa1106/items/2088c72209c76e4a837f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
