Bxslider에서 이전 슬라이드 위로 새 슬라이드를 가져 오는 방법은 무엇입니까?

Question

내 div 슬라이더에 Bxslider을 사용하고 있습니다. 그러나 이전 슬라이드로 슬라이드 할 때 다음 슬라이드를 필요로합니다. 슬라이드가 움직이면 다른 슬라이드 위에 쌓아 놓은 슬라이드가 남아있게됩니다.

이전 슬라이드 버튼을 누르면 애니메이션 효과가 적용될 수 있습니다.이 효과와 마찬가지로 : http://storiesbylove.com (태블릿에서는 사용하지 마십시오).

상자 슬라이더로이를 수행하는 방법을 아는 사람이 있습니까?

Answer 1

Bxslider 자체는 그런 식으로 작동하도록 설계되지 않았습니다. 페이드, 가로 및 세로의 3 가지 유형의 전환 만 지원합니다 (API에서 '모드'). 원하는 동작을 지원하려면 Bxslider를 수정해야합니다.

Bxslider는 슬라이더의 모든 이미지를 클래스 "bxslider"가있는 ul 요소에 저장합니다. 그런 다음 transform 속성을 사용하여 슬라이더 전체를 왼쪽/오른쪽으로 이동합니다 (또는 veritcal 슬라이더의 경우 위/아래). 원하는 동작을 얻으려면 bxslider를 수정하여 ul 컨테이너 대신 개별 이미지를 변환해야합니다.

아래에서이 작업을 수행하기 위해 Bxslider에서 setPositionProperty를 수정했습니다. 당신은 라인 (535)의 주위에 시작, 바로이 기능을 원래 jquery.bxslider.js 파일을 수정하고 변경할 수 있어야한다 (참고 :이 특정 솔루션은 = 사실 infiniteLoop를 지원하지 않습니다) :

var setPositionProperty = function(value, type, duration, params){ 
    var selectedSlide=parseInt(slider.active.index) + 1; 
    // Handle going backwards 
    if(value==0) 
     selectedSlide++; 
    //By default, slide the entire container 
    var selectedEl = el; 
    //If set to use "lockedSlide", then only slide one image rather 
    //than all of them 
    if(slider.settings.lockedSlide===true) 
     selectedEl = $(el.children()[selectedSlide-1]); 

    // use CSS transform 
    if(slider.usingCSS){ 
     // determine the translate3d value 
     var propValue = slider.settings.mode == 'vertical' 
         ? 'translate3d(0, ' + value + 'px, 0)' 
         : 'translate3d(' + value + 'px, 0, 0)'; 
     // add the CSS transition-duration 
     selectedEl.css('-' + slider.cssPrefix + '-transition-duration', duration/1000 + 's'); 
     if(type == 'slide'){ 
      // set the property value 
      selectedEl.css(slider.animProp, propValue); 
      // bind a callback method - executes when CSS transition completes 
      selectedEl.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){ 
       // unbind the callback 
       el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd'); 
       updateAfterSlideTransition(); 
      }); 
     }else if(type == 'reset'){ 
      selectedEl.css(slider.animProp, propValue); 
     }else if(type == 'ticker'){ 
      // make the transition use 'linear' 
      selectedEl.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear'); 
      selectedEl.css(slider.animProp, propValue); 
      // bind a callback method - executes when CSS transition completes 
      selectedEl.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){ 
       // unbind the callback 
       selectedEl.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd'); 
       // reset the position 
       setPositionProperty(params['resetValue'], 'reset', 0); 
       // start the loop again 
       tickerLoop(); 
      }); 
     } 
    // use JS animate 
    }else{ 
     var animateObj = {}; 
     animateObj[slider.animProp] = value; 
     if(type == 'slide'){ 
      selectedEl.animate(animateObj, duration, slider.settings.easing, function(){ 
       updateAfterSlideTransition(); 
      }); 
     }else if(type == 'reset'){ 
      selectedEl.css(slider.animProp, value) 
     }else if(type == 'ticker'){ 
      selectedEl.animate(animateObj, speed, 'linear', function(){ 
       setPositionProperty(params['resetValue'], 'reset', 0); 
       // run the recursive loop after animation 
       tickerLoop(); 
      }); 
     } 
    } 
} 

때 사용 bxslider를 활성화하여 "lockedSlide"를 true로 설정하십시오.

$('.bxslider').bxSlider({ 
    infiniteLoop: false, 
    hideControlOnEnd: true, 
    mode: 'horizontal', 
    lockedSlide: true 
});