Question

我正在使用三个基于bxSlider的滑块。我想从相反的一侧移动每个滑块。我已经尝试并完成了前两轮的操作，但是在第二轮结束时，幻灯片开始从上一张幻灯片的相同方向移动。

Here是到目前为止我尝试过的所有脚本。

对不起，如果问题不清楚，请检查小提琴，以使您了解我的问题，并在此先感谢您。

下面是主要脚本，我正在尝试

jQuery(document).ready( function($) {

let slideOneFirstInterval       = true;
let slideTwoFirstInterval       = true;
let slideThreeFirstInterval     = true; 

let slideOne  = $('#owlSlide1');

slideOne.bxSlider({
    auto            : false,
    autoControls    : false,
    stopAutoOnClick : false,
    pager           : false,
    speed           : 2000,
    infiniteLoop    : true,
    responsive      : true,
    slideWidth      : 600,
    controls        : false,
    autoStart       : false,
    randomStart     : false,
    preloadImages   :'all',
    onSlideAfter: function($slideElement, oldIndex, newIndex) {
        if (slideThreeFirstInterval) {

            setTimeout(function() { 
                //slideTwo.goToNextSlide(); 
                slideThree.goToNextSlide();
                console.log('True Statement.. 1');
            }, 2000);
            slideThreeFirstInterval = false

        } else {


            setTimeout(function() { 
                slideThree.goToPrevSlide(); 
                console.log('False Statement.. 1');
            }, 2000);
        }

    },

    autoDelay : 0,

});

let slideTwo  = $('#owlSlide2');
slideTwo.bxSlider({
    auto            : false,
    autoControls    : false,
    stopAutoOnClick : false,
    pager           : false,
    speed           : 2000,
    infiniteLoop    : true,
    responsive      : true,
    slideWidth      : 600,
    controls        : false,
    autoStart       : true,
    randomStart     : false,
    preloadImages   :'all',
    onSlideAfter: function($slideElement, oldIndex, newIndex) {

        if (slideTwoFirstInterval) {

            setTimeout(function() { 
                //slideThree.goToNextSlide();
                slideOne.goToPrevSlide();
                console.log('True Statement.. 2');

            }, 2000);
            slideTwoFirstInterval = false
        } else {

            setTimeout(function() { 
                //slideThree.goToNextSlide();
                slideOne.goToPrevSlide();
                console.log('false Statement.. 2');

            }, 2000);
        }

    },
});

let slideThree = $('#owlSlide3')

slideThree.bxSlider({
    auto            : false,
    autoControls    : false,
    stopAutoOnClick : false,
    pager           : false,
    speed           : 2000,
    infiniteLoop    : true,
    responsive      : true,
    slideWidth      : 600,
    controls        : false,
    autoStart       : true,
    randomStart     : false,
    autoDelay       : 0,
    preloadImages   :'all',

    onSlideAfter: function($slideElement, oldIndex, newIndex) {
        setTimeout(function() { 
            //slideOne.goToNextSlide();
            slideTwo.goToPrevSlide();
            console.log('True Statement.. 3');
        }, 2000);

    },
});

setTimeout(function() { 
    //slideOne.goToNextSlide();
    slideTwo.goToNextSlide();
    console.log('false Statement.. 3');
}, 3000);

}）;

Answer 1

假设您希望所有内容从左向右滑动而不是从右向左滑动，只需将所有出现的goToNextSlide()替换为goToPrevSlide()。您可能需要对HTML中的图像进行重新排序，但是这样做比纠结库要容易得多。

如何从相反侧移动每个bxSlider滑块？

1 个答案: