Question

拜托，你能帮助我，如何制作Vanilla JS旋转木马，同时显示3张图片，当我点击下一个按钮时，它会滑动，所以第一个（左）将滑出屏幕在右边会滑入新的？我试过这样做，但我把所有的div都叠在了下面，然后它同时滑动了所有的div ..

所有幻灯片都在CSS中设置：

.slide {
    display: inline-block;
}

以下是Codepen的工作示例：https://codepen.io/vlastapolach/pen/zzmMOW

这是完整的JS代码：

var Carousel = function (frameSelector, sliderSelector, slidesSelector, btnLeftSelector, btnRightSelector) {
    //A variable to store the position of the slides
    var leftPosition = 0;
    var frame = document.querySelector(frameSelector);
    var slides = document.querySelectorAll(slidesSelector);
    //Get the number of slides in the slider
    var slidesNumber = slides.length;
    var leftButton = document.querySelector(btnLeftSelector);
    var rightButton = document.querySelector(btnRightSelector);
    var slider = document.querySelector(sliderSelector);

    //Add classes to frame and slider divs
    frame.classList.add('frame');
    slider.classList.add('slider');

    //Event listeners for when the user clicks on the arrows
    leftButton.addEventListener("click", function() {
        carousel.previous();
    });

    rightButton.addEventListener("click", function() {
        carousel.next();
    });

    //Function that moves the slides left or right depending on variable value
    //Moves to the next slide if value is -1, moves to the previous is value is 1
    var moveSlide = function (value) {
        leftPosition += value*100;
        slider.style.left = leftPosition + '%';
    };

    return {
        //Function to move to next slide
        next: function() {
            if(leftPosition > (slidesNumber-1)*-100)
            {
                moveSlide(-1);
            } else {
                leftPosition = 0;
                slider.style.left = leftPosition + '%';
            }
        },
        //Function to go to previous slide
        previous: function() {
            if(leftPosition !== 0) {
                 moveSlide(1);
            } else {
                leftPosition = (slidesNumber-1)*-100;
                slider.style.left = leftPosition + '%';
            }
        }
    };
};

//Create new instance of Carousel
var carousel = new Carousel('#frame', '#slider', '#slider .slide', '.arrowLeft', '.arrowRight');

拜托，您知道如何让它发挥作用吗？谢谢！

Answer 1

谢谢，但我设法自己解决了。

到顶部容器我不得不添加：

overflow: hidden;

和滑块容器：

display: inline-flex;

所以它将所有div叠加在一行中，滑块终于可以工作了。

香草JavaScript中的旋转木马 - 滑动所有图片而不是一张

1 个答案: