在同一页面上使用两个 Bootstrap 轮播 - 一个在一张幻灯片上，一个在一个幻灯片上包含多个项目

Question

我在我的 wordpress 网站的同一页面上使用了两个不同的引导轮播

其中一个是普通的轮播，每个滑块上都有一个项目。第二个轮播在每张幻灯片上包含三个项目，并且每次只滑动一个项目，如下所示：

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

第一个轮播运行良好，但第二个轮播却不行。

第二个轮播没有在最后一个之后显示第一个项目。它首先显示两个空项目，然后进行奇怪的“跳转”（您可以在下面的 URL 中查看您是否访问我的网站）。

基本上是这样的：

[1, 2, 3] .. [2, 3, 4] .. [3, 4, blank] .. [4, blank, blank] ..然后跳回开始.. [1, 2, 3]

但是，如果我将轮播放在没有其他引导轮播的页面上，它可以正常工作！所以问题在于与第一个轮播的冲突。

我一直在谷歌上搜索并查看 stackoverflow 以获得关于我的特殊情况的答案很多小时没有运气。

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

我对轮播使用唯一标识符。

指向我的轮播的链接：

您可以在此处查看我的两个轮播（并检查代码）：https://devolt.se/。

在这里，您可以在测试页面上看到我的第二个轮播（在这里可以正常工作）：https://devolt.se/test/

Answer 1

虽然您确实有不同的标识符，但您不会使用它们来分别启动每个轮播。此外，您在#carousel-reviews 上使用slide.bs.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>

尝试分别启动它们，然后专门为每个轮播操作.carousel-item：

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