그누보드 - 그누보드 Owl Carousel 사용하기

그누보드 Owl Carousel 사용하기 정보

그누보드 Owl Carousel 사용하기

본문

그누보드의 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>