转盘连动滚轮独立到侧面

Question

我有一个包含多个轮播行的页面，但是每当我单击“下一个”或“上一个”按钮以显示轮播的其他项目时，它会影响所有轮播，而不仅仅是单击的轮播。

我尝试过将它们分离在部分视图中，以便每个js仅在其上下文中执行，但这仍然是同样的问题。

我希望能够独立地查看下一个项目和上一个项目

如果可能的话，我希望 js 仅获取部分视图内的项目，但如果有其他解决方案，我愿意倾听

js:

$(document).ready(function () {
    const multipleItemCarousel = document.querySelector('#carouselExample')
    if (window.matchMedia('(min-width: 576px)').matches) {
        const carousel = new bootstrap.Carousel(multipleItemCarousel, {
            interval: false
        })

        var carouselWidth = $('.carousel-inner')[0].scrollWidth;
        var cardWidth = $('.carousel-item').width();

        var scrollPosition = 0;

        $('.carousel-control-next').click(function () {
            if (scrollPosition < carouselWidth - (cardWidth * 4)) {
                scrollPosition += cardWidth;
                $('.carousel-inner').animate(
                    { scrollLeft: scrollPosition },
                    600
                );
            }
        });

        $('.carousel-control-prev').click(function () {
            if (scrollPosition > 0) {
                scrollPosition -= cardWidth;
                $('.carousel-inner').animate(
                    { scrollLeft: scrollPosition },
                    600
                );
            }
        });
    }
    else {
        $(multipleItemCarousel).addClass('slide');
    }

});

Answer 1

每个轮播都应该位于自己的范围内。请注意

$.find

的使用，它可以查找轮播的子元素。

$(document).ready(function() {

  // i'm assuming #carouselExample is the id of all your carousels
  const multipleItemCarousels = document.querySelectorAll('#carouselExample')

  multipleItemCarousels.forEach(function(multipleItemCarousel) {

    if (window.matchMedia('(min-width: 576px)').matches) {
      const carousel = new bootstrap.Carousel(multipleItemCarousel, {
        interval: false
      })

      var carouselWidth = $(multipleItemCarousel).find('.carousel-inner')[0].scrollWidth;
      var cardWidth = $(multipleItemCarousel).find('.carousel-item').width();

      var scrollPosition = 0;

      $(multipleItemCarousel).find('.carousel-control-next').click(function() {
        if (scrollPosition < carouselWidth - (cardWidth * 4)) {
          scrollPosition += cardWidth;
          $(multipleItemCarousel).find('.carousel-inner').animate({
              scrollLeft: scrollPosition
            },
            600
          );
        }
      });

      $(multipleItemCarousel).find('.carousel-control-prev').click(function() {
        if (scrollPosition > 0) {
          scrollPosition -= cardWidth;
          $(multipleItemCarousel).find('.carousel-inner').animate({
              scrollLeft: scrollPosition
            },
            600
          );
        }
      });
    } else {
      $(multipleItemCarousel).addClass('slide');
    }
  })
});