[플러그인] owl-carousel 로 메인슬라이드 만들기

커머스에서도 사용가능한 오픈 라이센스(MIT) 슬라이더를 소개한다.

예전의 owl-carousel에 비해 더욱 새로워진 owl-carousel2

링크 : http://www.owlcarousel.owlgraphic.com/

내가 아주 자주 애용하는 플러그인이다.

이 플러그인 말고 메이슨리도 아주 유용하게 사용한다.

이 플러그인은 그냥 메인 슬라이더나 갤러리 이미지 뿐만아니라

다양한 형태로 응용가능하고

카페24/워드프레스/티스토리 같은 솔루션에서도 쉽게 사용할 수 있다.

하나씩 차근차근 포스팅 하겠다.

먼저 사이트내의 Installation을 참고하여 설치를 해야한다.

1. JS와 CSS 파일을 다운로드 받는다.

2. 서버, 호스팅 또는 블로그에 업로드 후 삽입한다.

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css"> // CSS는 둘중에 하나만 해도 상관없다.

<script src="jquery.min.js"></script> // 제이쿼리를 기반으로 작동하기 때문에 꼭 걸어준다.
<script src="owlcarousel/owl.carousel.min.js"></script> // 업로드한 경로를 지정한다.

3. 그리고 코딩을 시작한다.

HTML 작성

<div class="owl-carousel">
    <div>원하는 내용을 채워 넣는다</div>
    <div>원하는 내용을 채워 넣는다</div>
    <div>원하는 내용을 채워 넣는다</div>
</div>

CSS 작성

CSS의 경우 슬라이드를 감싸는 엘리먼트의
class나 id를 다른 것으로 지정할 경우
알아서 속성을 지정한다.

JS 작성

$('.owl-carousel').owlCarousel({
    items:2, // width에 슬라이드를 2개만 보여주겠다는 뜻이다. 1을 입력하면 1개의 슬라이드가 한번에 표시된다.
    loop:true, // 무한으로 슬라이딩이 된다.
    center:true // 엘리먼트를 중앙으로 
}); // 추가적인 옵션들은 따로 정리해서 포스팅하겠다.

이렇게 하면 슬라이드는 끝났다. 원하는 위치에 넣으면 끝이다.

owl-carousel의 사용법을 알면 매우 유용하게 사용할 수 있다.

심지어 커머셜로 사용해도 무관하기 때문에

쇼핑몰이나 서비스 사이트에서도 활용할 수 있다.

아래는 예제

See the Pen PGypAg by biggerbig (@biggerbig) on CodePen.