그누보드 Owl Carousel 사용하기 > 그누보드5 팁자료실

그누보드5 팁자료실

그누보드 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>
추천
3

댓글 4개

전체 17 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT