问题描述:

I'm using Bxslider for my div slider. But I need my next slide to slide over my old slide - effectively once a slide has animated in it remains there stacked on top of the others that went before it.

When prev slide button is pressed then it needs to animate out - similar to this effect: http://storiesbylove.com (don't try it out on a tablet though).

Does anyone know how to do this with boxslider?

网友答案:

Bxslider itself is not designed to operate in that way. It only supports three types of transitions ("mode" in the API): fade, horizontal, and vertical. To support the behavior you want would require modifications to Bxslider.

Bxslider stores all the images in the slider in a ul element with a class "bxslider". It then uses the transform property to move the entire slider left/right (or up/down for a veritcal slider). To get the desired behavior you would have to modify bxslider to transform the individual images instead of the ul container.

Below I modified setPositionProperty from Bxslider to do this. You should be able to just modify the original jquery.bxslider.js file and change this function, beginning around line 535 (NOTE: this particular solution does not support 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();
            });
        }
    }
}

To use when activating bxslider set "lockedSlide" to true:

$('.bxslider').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true,
  mode: 'horizontal',
  lockedSlide: true
});
相关阅读:
Top