21'C 흐림
서울 강남구
그누보드의 Owl Carousel을 보다 쉽게 사용하기
1. owlcarousel 사용하기위해 그누보드 js 디렉토리에 존재하는 owlcarousel의 js와 css를 추가
add_javascript('<script src="'.G5_JS_URL.'/owlcarousel/owl.carousel.min.js"></script>', 10);
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/owlcarousel/owl.carousel.min.css">', 10);
2. owlcarousel를 쉽게 사용하기 위해 스크립트 함수 추가
- 스크립트 함수 파일 형태로 추가 - 위치 /js/owlcarousel/load.owl.carousel.js
jQuery(window).ready(function () {
load_owl_carousel();
});
function load_owl_carousel() {
// OWL CAROUSEL
var _container = jQuery("div.owl-carousel");
if(_container.length > 0) {
_container.each(function() {
var _this = jQuery(this),
_options = _this.attr('data-plugin-options');
_defaults = {
loop: true,
margin: 10,
nav: true,
center: false,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
freeDrag: false,
stagePadding: 0,
merge: false,
mergeFit: true,
autoWidth: false,
startPosition: 0,
URLhashListener: false,
navRewind: true,
navText: [
'<i class="fa fa-angle-left"></i>',
'<i class="fa fa-angle-right"></i>'
],
slideBy: 1,
dots: true,
dotsEach: false,
dotData: false,
lazyLoad: false,
lazyContent: false,
autoplay: false,
autoplayTimeout: 3000,
autoplayHoverPause: false,
smartSpeed: 250,
//fluidSpeed: 'Number',
autoplaySpeed: false,
navSpeed: false,
//dotsSpeed: 'Number/Boolean',
dragEndSpeed: false,
callbacks: true,
responsiveRefreshRate: 200,
responsiveBaseElement: '#wrapper',
responsiveClass: true,
video: false,
videoHeight: false,
videoWidth: false,
animateOut: false,
animateIn: false,
fallbackEasing: 'swing',
info: false,
nestedItemSelector: false,
itemElement: 'div',
navContainer: false,
dotsContainer: false,
animateOut: "slideOutDown",
animateIn: "flipInX",
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:5
}
}
};
var _config = jQuery.extend({}, _defaults, JSON.parse(_options));
_this.owlCarousel(_config).addClass("owl-loaded");
});
}
}
3. 스크립트 함수 load_owl_carousel() 로드
add_javascript('<script src="'.G5_JS_URL.'/owlcarousel/load.owl.carousel.js"></script>', 10);
4. owlcarousel사용
클레스 owl-carousel 추가와 data-plugin-options을 이용해서 owlcarousel사용하시면 되며 사용 예제는 아래를 참고하시면 됩니다.
마지막으로 옵션중 animateIn, animateOut을 사용하기 위해서는 아래 링크를 참고하시면 됩니다.
https://daneden.github.io/animate.css/
- 샘플 -
<div class="owl-carousel" data-plugin-options='{
"loop": true,
"margin": 10,
"nav": true,
"dots": false,
"center": true,
"slideBy": "1",
"autoplay": true,
"autoplayTimeout": 4500,
"autoWidth": false,
"merge": true,
"rtl": false,
"animateIn": "flipInX",
"animateOut": "flipOutX",
"responsive": {
"0": {"items":1},
"600": {"items":2},
"1000": {"items":2}
}
}'>
<a href="#">
<img style="display:inline-block;width: 100%;" src="1-min.jpg" alt="">
</a>
<a href="#">
<img style="display:inline-block;width: 100%;" src="2-min.jpg" alt="">
</a>
<a href="#">
<img style="display:inline-block;width: 100%;" src="3-min.jpg" alt="">
</a>
<a href="#">
<img style="display:inline-block;width: 100%;" src="4-min.jpg" alt="">
</a>
</div>