Javascript 如何从另一侧移动每个bxSlider滑块？

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

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

很抱歉，如果问题不清楚，请检查小提琴，以便您了解我的问题，并提前对此表示感谢

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

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

---

}))

假设您希望所有内容都从左向右滑动，而不是从右向左滑动，只需将所有出现的

goToNextSlide（）

替换为

gotoprevside（）

。您可能需要在HTML中对图像重新排序，但这比与库纠缠更容易。

代码太多了。第一：删除演示中的div onclick（它们真的很烦人，而且无助于调试-相反）。第二：取下工作正常的滑块，只留下不工作的滑块。三,。删除查看错误时不需要的所有内容。如果它可以复制与所有其他删除，只有2张幻灯片，完美。我们不需要知道/看到它在您的布局的三分之一之内。这是无关紧要的。要明确一点：任何试图修复你的bug的人都会这样做来修复它。但你应该这样做是有道理的。一旦你到了删除任何东西的地步，你也会删除这个bug，这就是你应该在问题中包含的内容。@AndreiGheorghiu非常感谢你的第一点。我已经按照指示做了。我认为其余的东西是正确的，我不需要删除。我想说的是，我正在寻找这个专家团体的指导方针。我不想听起来太苛刻。但是如果你不彻底清理，你就会给那些试图帮助你的人更多的工作。这里的大多数人都是在有点无聊的时候来的。如果他们看到一些容易修复的东西，他们会提供帮助。如果没有，他们跳到下一个问题。如果回答一个问题意味着即使是长达10分钟的清理，得到正确答案的几率也会下降。我只有一个问题：“从另一边”是什么意思？要更改幻灯片的顺序吗？为什么不把它们按你想要的顺序放在首位呢？你能用一种技术性的方式解释一下你到底想要发生什么吗？示例：“我希望滑块在最后一张幻灯片上打开，并在

infinitelop

打开的情况下朝第一张幻灯片的方向自动启动。”