Owl.carousel.js 반응형 터치 슬라이더 , 캐러셀, 스와이프

반응형웹이나 모바일웹에서 터치 슬라이드를 적용하는데 아주 유용한 플러그인을 소개해 드리겠습니다.

플러그인의 사용이 무조건 좋다고 볼 수는 없으나 

직접적인 소스를 만드는 시간에 대한 할애가 너무 많기 때문에 이런 플러그인을 잘 사용하는 것도 중요하다 생각합니다.

 

1. 사용방법

위 사이트에서 Download 버튼을 클릭해 다운 받습니다.

그럼 위사이트 전체적인 설명이 들어있는 폴더를 확인할 수 있는데요.

아래의 파일을 찾아 원하는 경로위치에 넣어 줘야 하는데 정확히 어디 위치에 있는지 찾기 힘드실 수 있습니다.

• owl.carousel.min.css 와 owl.theme.default.min.css 는
  OwlCarousel2 > docs > assets > owlcarousel > assets 폴더 안에 있습니다.

• owl.carousel.min.js 는
  OwlCarousel2 > docs > assets > owlcarousel 폴더 안에 있습니다.

<!-- css -->
<link rel="stylesheet" href="./css/owl.carousel.min.css">
<link rel="stylesheet" href="./css/owl.theme.default.min.css"> 

<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="./js/owl.carousel.min.js"></script>

상단 head태그 안에 위의 내용을 import 합니다.

 

<div class="owl-carousel owl-theme">
    <div class="item">내용1</div>
    <div class="item">내용2</div>
    <div class="item">내용3</div>
    <div class="item">내용4</div> 
    <div class="item">내용5</div>
</div>

html 적용

owl-theme 클래스 같은 경우 선택적인 사항인데요. 

owl-theme 클래스를 넣음으로 인해서 슬라이드를 컨트롤할 수 있는 양쪽 버튼과 dot버튼이 추가로 생성 됩니다.

 

$(document).ready(function(){    
    $(".owl-carousel").owlCarousel();
    
    });

자바스크립트

 

*{margin:0; padding:0; border:0;}.owl-carousel{}.owl-carousel .item{text-align:center; background:#93e0e4; height:200px; line-height:200px; margin:10px;}cs

css

 

자 위와 같이 적용하고 화면을 확인해 보죠~

터치 잘되고 슬라이드 잘되는 것을 확인하 실 수 있습니다.

위에서 작업 시 참고 사항은

스크립트를 실행 했을때 기존의 클래스 owl-carousel 를 사용하여 스크립트를 실행하였는데요.

owl-carousel 클래스는 기존의 가지고 있는 css의 owl.carousel.min.css 에서 제어를 하는 부분이기 때문에 

작업자가 다른 새로운 클래스를 적용하여 그 부분을 가지고 customize를 하시는게 좋을거라 생각이 듭니다.

 

기타 다른 상세한 옵션은 Owl.carousel.js 홉페이지에서 참고하여 많은 응용이 가능 합니다.

Demos : https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

Docs : https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html

도움이 되셧다면 공감 부탁드립니다.

 

 

 

출처: https://kcmschool.com/92 [web sprit:티스토리]