Question

我使用Bxslider作为div滑块。但是我需要我的下一张幻灯片滑过我的旧幻灯片 - 实际上，一旦幻灯片动画完成，它仍然会堆叠在其前面的其他幻灯片上。

当按下上拉滑动按钮时，它需要动画显示 - 类似于此效果：http://storiesbylove.com（不要在平板电脑上试用它）。

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

Answer 1

Bxslider本身并不是以这种方式运作的。它只支持三种类型的转换（＆＃34;模式＆＃34;在API中）：淡入淡出，水平和垂直。要支持您想要的行为，需要修改Bxslider。

Bxslider将滑块中的所有图像存储在一个带有类＆＃34; bxslider＆＃34;的ul元素中。然后，它使用transform属性向左/向右移动整个滑块（或向上/向下移动一个veritcal滑块）。要获得所需的行为，您必须修改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时使用＆＃34; lockedSlide＆＃34;为真：

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

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

1 个答案: