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

작업 소스들

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

TheStorybook 2025. 3. 3. 15:00

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

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

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

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

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