BXSLIDER.JS 정리

bxSlider.js 정보 

 

공식홈페이지 :  https://bxslider.com/

 

기본 예제.

 

-HTML

<ul class="bxslider">

    <li><img src="images/img01.jpg" /></li>

    <li><img src="images/img02.jpg" /></li>

    <li><img src="images/img03.jpg" /></li>

</ul>

 

-슬라이더 적용방법

$('.bxslider').bxSlider({

        auto: true,

        autoControls: true,

        pager:true, });

 

 

 

아래와 같은 방식으로 slider에 대한 옵션값 설정 및 적용

==================================================================================

~.jsp

<div class="main-thumb-section hide-controls bxslider-in genrePopScript" data-width="186" 

        data-min="6" data-max="6" data-margin="16.5" data-pager="true" data-controls="true" data-loop="true"> //슬라이더 dom

<li>~~~~~~<li>

 

 

해당페이지.js

bxsliderInV5("genrePopScript"); //호출시에는 해당 Element에만적용

bxsliderInV5(); //이와 같이 사용시에는 bxslider-in class를 찾아 전체 적용

현재 프로젝트는 아래와 같이 적용중

 

bxsliderInV5 : function(element, callback) {    

        var me = commonScript;

        if(!element){

            $('.bxslider-in').each(function(index, ele){

                var isNoslide = ($(ele).data("noslide")) ? $(this).data("noslide") : false;

                

                if(!isNoslide || isTemplateRender(ele)){                    

                    return bxsliderV5(ele, callback);

                }

            });

        }

        else{

            bxsliderV5(element, callback);

        }

        

        function isTemplateRender(ele){ // handlbars 처리완료여부 확인

            if($(ele).children() && $(ele).children().length > 0){

                var tpldefine = $($(ele).children()[0]).attr('type');

                

                if(tpldefine && tpldefine.indexOf('template') > -1){

                    return false;

                }

                else{

                    return true;

                }

            }

            

            return false;

        }

        

        function bxsliderV5(element, callback){

            var tmpSlider;

            $(element).each(function () {

                

                if($(this).hasClass("tving-cahtbot-template")){

                    return;

                }

                

                var sts = $(this);

                                

                var pager = ($(this).data("pager")) ? true : false;

                var controls = ($(this).data("controls")) ? true : false;

                var auto = ($(this).data("auto")) ? true : false;

                var pagerType = ($(this).data("pagertype")) ? "short" : "full";

                var caption = ($(this).data("caption")) ? true : false;

                var loop = ($(this).data("loop")) ? $(this).data("loop") : false;            

                var swidth = ($(this).data("width")) ? $(this).data("width") : 0;

                var minslide = ($(this).data("min")) ? $(this).data("min") : 1;

                var maxslide = ($(this).data("max")) ? $(this).data("max") : 1;

                var slidemg = ($(this).data("margin")) ? $(this).data("margin") : 0;

                var mode = ($(this).data("mode")) ? $(this).data("mode") : "horizontal";

                var isForce = ($(this).data("force")) ? $(this).data("force") : false;

                var isNoslide = ($(this).data("noslide")) ? $(this).data("noslide") : false;

                var moveSlides = ($(this).data("moveslides")) ? $(this).data("moveslides") : 0;

                var bxslider = ($(this).hasClass("bxslider")) ? this :  $(this).find(".bxslider");

                var itemLength = $(bxslider).children().length;

                

                if(isTemplateRender(this) && !isNoslide && (isForce || (itemLength > 0)) ) {                    

                    if(itemLength <= minslide){ // 정책반영

                        pager = false;

                        controls = false;

                        loop = false;

                    }

                    

                    var _this = this;

                    tmpSlider = $(bxslider).bxSlider({

                                infiniteLoop : loop, // 전체 동일정책 반영

                                controls: controls,

                                auto : auto,

                                pager : pager,

                                pagerType : pagerType,

                                captions : caption,

                                slideWidth : swidth,

                                minSlides : minslide,

                                maxSlides : maxslide,

                                slideMargin : slidemg,

                                auto : auto,

                                autoControls : auto,

                                autoHover : auto,

                                hideControlOnEnd : true,

                                touchEnabled : (navigator.maxTouchPoints > 0), //IE에서 드래그시 클릭되는 이슈로 인하여 설정

                                mode : mode,

                                moveSlides : moveSlides,

                                onSliderLoad : function(currentIndex){

                                    if(callback){

                                        callback(this);

                                    }

                                    

                                    $(".keyvisual-slider").on("click", ".bx-prev, .bx-next", function(e) {

                                        if(auto == true) {

                                            tmpSlider.stopAuto();

                                            setTimeout(function() { 

                                                tmpSlider.startAuto();

                                            },200)

                                            

                                        }

                                    });

                                            

                                },

                                onSlideAfter : function(element) {

                                    if(callback && callback.name == "callbackFunction") { 

                                        callback(element);

                                    }

                                }

                            });

                    

                    $(_this).attr("data-noslide", "true");

                }

            });

            

            return tmpSlider;

        }

    },

==================================================================================

 

 

현재 사용하고 있는 대부분의 옵션과 실제 설정값.

 

pager:  true// 현재 슬라이드 위치 표시

auto: true // 자동재생

controls : true //좌우버튼 보이기

loop : true // 요소 끝까지 갔을때에 처음으로 다시시작하는 옵션

caption : false // 이미지 안에 설명글

slideWidth: 186 // 슬라이드 되는 요소의 넓이

minSlides: 6 // 보여지는 슬라이드 최소 갯수.

maxSlides: 6 //보여지는 슬라이드 최대 갯수

slideMargin : 16.5 //슬라이드 되는 요소의 마진

moveSlides: 2 //이동되는 슬라이드 요소 갯수

mode : horizontal // 수평수직 모드

hideControlOnEnd : true // 처음과 끝이 있는 슬라이드

oSliderLoad : function() {} //슬라이더 로딩 완료후 실행 함수.