有人可以解决我的轮播中的错误吗？请

Question

虽然轮播是自动滑动的，但我希望我的卡片一次滑动，但在第一张幻灯片时，1 张卡片被滑动，但在接下来的 2 张卡片一起被滑动。

var multipleCardCarousel = document.querySelector("#event-section-Carousel");

if (window.matchMedia("(min-width: 0px)").matches) {
    var carousel = new bootstrap.Carousel(multipleCardCarousel, {
        interval: 2000, // Set the desired interval time in milliseconds
    });

    var cardWidth = $("#event-section-Carousel .carousel-item").width();
    var scrollPosition = 0;
    var carouselWidth = $("#event-section-Carousel .carousel-inner")[0].scrollWidth;

    // Duplicate carousel items
    var carouselItems = $("#event-section-Carousel .carousel-item").clone();
    $("#event-section-Carousel .carousel-inner").append(carouselItems);

    var nextSlide = function () {
        scrollPosition += cardWidth;

        if (scrollPosition >= carouselWidth) {
            scrollPosition = 0; // Reset scroll position to start
            $("#event-section-Carousel .carousel-inner").scrollLeft(0); // Reset scroll position to start
        }

        $("#event-section-Carousel .carousel-inner").animate(
            { scrollLeft: scrollPosition },
            500
        );
    };

    $("#event-section-Carousel .carousel-control-next").on("click", nextSlide);

    $("#event-section-Carousel .carousel-control-prev").on("click", function () {
        scrollPosition -= cardWidth;

        if (scrollPosition < 0) {
            scrollPosition = carouselWidth - cardWidth; // Set scroll position to end
            $("#event-section-Carousel .carousel-inner").scrollLeft(scrollPosition); // Set scroll position to end
        }

        $("#event-section-Carousel .carousel-inner").animate(
            { scrollLeft: scrollPosition },
            500
        );
    });

    // Set automatic slide every 5 seconds
    setInterval(nextSlide, 5000);
} else {
    $(multipleCardCarousel).addClass("slide");
}

我对这个问题感到非常沮丧。请高手解决一下

Answer 1

试试这个：

var multipleCardCarousel = document.querySelector("#event-section-Carousel");

if (window.matchMedia("(min-width: 0px)").matches) {
    var carousel = new bootstrap.Carousel(multipleCardCarousel, {
        interval: 2000, // Set the desired interval time in milliseconds
    });

    var cardWidth = $("#event-section-Carousel .carousel-item").width();
    var scrollPosition = 0;
    var carouselWidth = $("#event-section-Carousel .carousel-inner")[0].scrollWidth;

    // Duplicate carousel items
    var carouselItems = $("#event-section-Carousel .carousel-item").clone();
    $("#event-section-Carousel .carousel-inner").append(carouselItems);

    var nextSlide = function () {
        // Check if we are on the first slide
        if (scrollPosition === 0) {
            // Slide two cards together
            scrollPosition += cardWidth * 2;
        } else {
            // Slide one card at a time
            scrollPosition += cardWidth;
        }

        // Check if we have reached the end of the carousel
        if (scrollPosition >= carouselWidth) {
            scrollPosition = 0; // Reset scroll position to start
            $("#event-section-Carousel .carousel-inner").scrollLeft(0); // Reset scroll position to start
        }

        $("#event-section-Carousel .carousel-inner").animate(
            { scrollLeft: scrollPosition },
            500
        );
    };

    $("#event-section-Carousel .carousel-control-next").on("click", nextSlide);

    $("#event-section-Carousel .carousel-control-prev").on("click", function () {
        scrollPosition -= cardWidth;

        // Check if we have reached the beginning of the carousel
        if (scrollPosition < 0) {
            scrollPosition = carouselWidth - cardWidth; // Set scroll position to end
            $("#event-section-Carousel .carousel-inner").scrollLeft(scrollPosition); // Set scroll position to end
        }

        $("#event-section-Carousel .carousel-inner").animate(
            { scrollLeft: scrollPosition },
            500
        );
    });

    // Set automatic slide every 5 seconds
    setInterval(nextSlide, 5000);
} else {
    $(multipleCardCarousel).addClass("slide");
}