안녕하세요. 린치핀소프트 한광희입니다.

 

이번 포스트에서 소개하는 “Owl Carousel” 플러그인은 이미 수많은 플러그인들이 나와 있는 Carousel 또는 Slider 플러그인중에 하나입니다. 이미 많은 좋은 플러그인과 라이브러리가 많이 있음에도 불구하고 Owl Carousel을 소개하는 이유는 사용하기가 굉장히 간편하며, 많은 기능을 제공하고 있다는 점 때문입니다. jQuery slider, bootstrap carousel 등 몇몇 가지 많은 slider 라이브러리를 사용하여 Carousel 기능을 제작해 보았지만 최근에 가장 자주 사용하게 되는 라이브러리는 단연 “Owl Carousel”입니다.

 

제 주관적인 평으로 따지면 Owl Carousel은 다음과 같은 장점이 있습니다..

1.jQuery 와 호환되어 간단히 사용하기 쉽다.

2. 반응형이 지원되며 반응형의 브레이크 포인트(Break Point)를 직접 지정 할 수 있어서 어떠한 CSS Framework(부트스트랩,파운데이션 등) 과 결합하더라도 반응형으로 제작하기 용이하다.

3. 터치(Touch)가 잘 지원되어 모바일에서도 만족스럽게 연출된다.

4. IE7부터 호환이 되며 크로스브라우저를 지원한다.

5. AutoPlay. AutoHeight, video slider 등등 세부 옵션을 다양하게 제공한다.

 

Owl Carousel을 사용한 데모는 http://www.owlcarousel.owlgraphic.com/demos/demos.html 에서 확인하실 수 있습니다 .플러그인의 각 특성별로 다양한 예제를 제공하고 있습니다.

 

 

Owl Carousel 시작하기

<head>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</head>

<body>

<!-- 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>


<script>
$(document).ready(function(){ $(".owl-carousel").owlCarousel(); });
</script>
</body>

 

Owl Carousel 활용예시는 위와 같습니다. 위의 소스코드는 http://www.owlcarousel.owlgraphic.com/docs/started-installation.html 에서 참고하였습니다.

 

 

Responsive 반응형 지정 예제

$('.owl-carousel').owlCarousel({
  loop:true, 
  margin:10, 
  responsiveClass:true, 
  responsive:{ 
    0:{ items:1, nav:true }, 
    600:{ items:3, nav:false }, 
    1000:{ items:5, nav:true, loop:false } 
  } 
})

위의 소크도는 반응형 지정 예제입니다 “responsive” 항목을 객체로서 “수치 : 객체”(0:{ items:1, nav:true}) 형식으로 각 화면너비시에 슬라이드되는 item의 수를 지정할 수 있도록 되어 있습니다.

위 예제에서는 화면너비가 0px ~ 599px / 600px ~ 999px  / 1000px~ 로 구분하고 있으며 각각 1개 / 3개 /5개의 이미지가 한 슬라이드에 보여지도록 구성하고 있는 예시입니다.

 

screenshot-2016-05-05 14-15-39

Owl Carousel의 강점중의 하나는 위와 같이 비디오(Youtube) 까지도 슬라이드로 구성해볼수 있다는 점입니다.