javascript - 在同一页面上使用两个 Bootstrap 轮播 - 一个单独的和一个在一张幻灯片上包含多个元素

Question

我在我的 wordpress 网站的同一页面上使用了两个不同的 Bootstrap Carousel

其中一个是普通轮播，每个 slider 上有一个元素。第二个轮播在每张幻灯片上有三个元素，每次只滑动一个元素，如下所示:

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

第一个 carousel 工作正常，但第二个 carousel 不行。

第二个轮播不显示最后一个元素之后的第一个元素。它首先显示两个空元素，然后奇怪地“跳转”(您可以在下面的 URL 中查看是否访问我的网站)。

基本上是这样的:

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

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

我已经在谷歌上搜索并查看 stackoverflow 以寻找有关我的特定情况的答案很多个小时了，但没有运气。

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

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

我的轮播链接:

您可以在这里看到我的两个轮播(并检查代码):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>