javascript - 如何从另一侧移动每个 bxSlider slider ？

Question

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

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

很抱歉，如果问题不清楚，请检查 fiddle ，以便您了解我的问题，并在此先感谢您。

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

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 中重新排列图像，但这比在库中纠结更容易。