如何让新幻灯片滑过 Bxslider 中的上一张幻灯片？

Question

我将Bxslider 用于我的 div 滑块。但是我需要我的下一张幻灯片滑过我的旧幻灯片 - 有效地，一旦一张幻灯片在其中设置了动画效果，它仍然会堆叠在之前的其他幻灯片之上。

当按下上一个滑动按钮时，它需要动画出来 - 类似于此效果：http://storiesbylove.com（但不要在平板电脑上尝试）。

有人知道如何用 boxslider 做到这一点吗？

Answer 1

Bxslider 本身并非设计为以这种方式运行。它仅支持三种类型的过渡（API 中的“模式”）：淡入淡出、水平和垂直。要支持您想要的行为，需要对 Bxslider 进行修改。

Bxslider 将滑块中的所有图像存储在具有“bxslider”类的 ul 元素中。然后它使用 transform 属性向左/向右移动整个滑块（或向上/向下移动垂直滑块）。要获得所需的行为，您必须修改 bxslider 以转换单个图像而不是 ul 容器。

下面我从 Bxslider 修改了 setPositionProperty 来做到这一点。您应该能够只修改原始 jquery.bxslider.js 文件并更改此函数，从第 535 行开始（注意：此特定解决方案不支持infiniteLoop=true）：

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
});