https://owlcarousel2.github.io/OwlCarousel2/
https://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/#how-to
<head>태그 안에 경로 설치하기
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css"><head>태그에 위 두개 CSS파일을 포함시킨다.
📌owl.carousel.css 파일 필요하며 css파일은 js파일 앞에 있어야 한다.
📌owl.theme.default.css : 선택사항. 기본 탐색 컨트롤이 필요할 경우 필요하다.
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>📌첫번째로 jquery파일
📌두번째로 caruosel.js 파일을 넣는다.
MarkUP
<!-- Set up your HTML -->
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>📌필수 클래스: owl-caruosel
📌추가 클래스: owl-theme (이것은 점, 버튼의 기본 탐색 컨트롤 희망시 선택적으로 클래스 삽입)
Script
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
owl-sarousel Options
1. items
: 화면에 보일 아이템 개수
2. margin
: 아이템간 간격
3. loop
: 무한재생 (무한슬라이드 재생시 true)
4. center
: 슬라이드 중앙 정렬
5. dots
: 슬라이드 아래 버튼 생성 (꽤 투박해서 CSS로 만져줘야 함)
6. autoplay
: 자동으로 슬라이드 넘기기 (자동넘기기 할 경우 true)
7. autoplayHoverPause
: 마우스 hover시 슬라이드가 중지됨(PC에서는 필수이다/모바일부터 해제)
8. smartSpeed
: 슬라이드 이동 속도
9. responsive
: 반응형에 따라 아이템을 어떻게 조절할 것인지 사용
더 많은 옵션 보기
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
간혹 자동슬라이드가 격하게(?) 움직일때가 있는데 이때는
autoplayTimeout 과 smartSpeed의 숫자를 동일하게 맞춰서 부드럽게 움직일 수 있도록 해야한다.
참고자료
'Tools > plugIn' 카테고리의 다른 글
| [ plugIn] Chrome User Agent Switcher 사용하기 (0) | 2021.12.01 |
|---|---|
| [plugIn] ScrollReveal 사용하기 (0) | 2021.10.31 |
| [slider] slick slider 사용법 (0) | 2021.10.31 |
| [plugIn] Font Awesome 적용하기 (0) | 2021.10.29 |
| [slider] Flexslider 사용하기 (0) | 2021.07.09 |