Javascript 在同一页上使用两个引导传送带-一个是单个的，另一个是一张幻灯片上有多个项目 我在wordpress网站的同一页面上使用了两个不同的引导转盘

其中一个是普通的旋转木马，每个滑块上有一个项目。第二个旋转木马在每张幻灯片上有三个项目，每次只滑动一个项目，如下所示：

[1,2,3]。。[2, 3, 4] .. [3,4,1]

第一个旋转木马工作正常，但第二个旋转木马工作不正常

第二个旋转木马未显示最后一个旋转木马后的第一个旋转木马。它首先显示两个空项目，然后做一个奇怪的“跳转”（你可以在下面的URL中看到你是否访问我的网站）

基本上是这样的：

[1,2,3]。。[2, 3, 4] .. [3,4，空白]。。[4，空白，空白]…然后跳回开始。。[1,2,3]

但是，如果我将旋转木马放在没有其他引导旋转木马的页面上，它就可以正常工作！因此问题在于与第一个旋转木马冲突

我已经在谷歌上搜索了好几个小时，并在stackoverflow上寻找关于我的特殊情况的答案，但都没有运气

所有的老问题都是针对使用两个普通转盘的人，而不是涉及“多滑块”的人

我为传送带使用唯一标识符

指向我的旋转木马的链接： 您可以在这里看到我的两个旋转木马（并检查代码）：

---

在这里，您可以在测试页面上看到我的第二个旋转木马（它在这里工作得很好）：

虽然您有不同的标识符，但不能使用它们分别启动每个旋转木马。另外，您在

#carousel reviews

上使用

slide.bs.carousel

事件，但在作用域函数中，您将代码应用于两个carousel的项目，这就是导致这种奇怪行为的原因

查看您的代码：

<script>
// Stop portfolio slider from auto looping
$('.carousel').carousel({ //HERE YOU INITIATE BOTH CAROUSELS AT SAME TIME
  interval: false
})
</script>

<script>
jQuery(document).ready(function() {

    /*
        Carousel
    */
    $('#carousel-reviews').on('slide.bs.carousel', function (e) {

        var $e = $(e.relatedTarget);
        var idx = $e.index();
        var itemsPerSlide = 3;
        var totalItems = $('.carousel-item').length;

        if (idx >= totalItems-(itemsPerSlide-1)) {
            var it = itemsPerSlide - (totalItems - idx);
            for (var i=0; i<it; i++) {
                // append slides to end
                if (e.direction=="left") {
                    $('.carousel-item').eq(i).appendTo('.carousel-inner');
                }
                else {
                    $('.carousel-item').eq(0).appendTo('.carousel-inner');
                }
            }
        }
    });

});
</script>

---

您是否为每个转盘使用唯一标识符？这是否回答了您的问题？是的，我使用的是唯一的标识对不起，但这个答案对我没有帮助。我已经看了很多这样的问题/答案，试图找到一些可以帮助我的不同细节。谢谢niklaz，但出于某种原因，这并没有起到作用！现在，当您“滑动”第二个旋转木马时，第一个旋转木马中的内容开始在第二个旋转木马主体内的奇怪位置“弹出”，有时在其下方

<script>
    // Stop portfolio slider from auto looping
   $('#carousel-portfolio').carousel({
      interval: false
    })
    $('#carousel-reviews').carousel({ 
      interval: false
    })
    </script>

    <script>
    jQuery(document).ready(function() {

        /*
            Carousel
        */
        $('#carousel-reviews').on('slide.bs.carousel', function (e) {

            var $e = $(e.relatedTarget);
            var idx = $e.index();
            var itemsPerSlide = 3;
            //also, here, specify selection only to #carousel-reviews: 
            var carouselItems = $('#carousel-reviews .carousel-item');
            var totalItems = carouselItems.length; 

            if (idx >= totalItems-(itemsPerSlide-1)) {
                var it = itemsPerSlide - (totalItems - idx);
                for (var i=0; i<it; i++) {
                    // append slides to end
                    if (e.direction=="left") {
                        carouselItems.eq(i).appendTo('#carousel-reviews .carousel-inner');
                    }
                    else {
                        carouselItems.eq(0).appendTo('#carousel-reviews .carousel-inner');
                    }
                }
            }
        });
        //and if you need to do this to #carousel-portfolio too: 

       $('#carousel-portfolio').on('slide.bs.carousel', function (e) {

            var $e = $(e.relatedTarget);
            var idx = $e.index();
            var itemsPerSlide = 3;
            //also, here, specify selection only to #carousel-reviews: 
            var carouselItems = $('#carousel-portfolio .carousel-item');
            var totalItems = carouselItems.length; 

            if (idx >= totalItems-(itemsPerSlide-1)) {
                var it = itemsPerSlide - (totalItems - idx);
                for (var i=0; i<it; i++) {
                    // append slides to end
                    if (e.direction=="left") {
                        carouselItems.eq(i).appendTo('#carousel-portfolio .carousel-inner');
                    }
                    else {
                        carouselItems.eq(0).appendTo('#carousel-portfolio .carousel-inner');
                    }
                }
            }
        });

    });
    </script>