Karussell in Vanille JavaScript - Schiebe alle Bilder statt einer

Question

bitte, können Sie mir helfen, wie man in Vanilla JS Karussell macht, das wird 3 Bilder gleichzeitig zeigen, und wenn ich auf die nächste Schaltfläche klicke, wird es rutschen, also wird zuerst (links) aus dem Bildschirm rutschen und nach rechts wird ein neues hineingleiten? Ich habe versucht, es zu tun, aber ich habe alle divs unter gestapelt, und die sie alle von ihnen zugleich gleitet ..

alle Folien in CSS festgelegt haben:

.slide { 
    display: inline-block; 
} 

Hier Beispiel auf Codepen arbeiten: https://codepen.io/vlastapolach/pen/zzmMOW

Und hier ist voll Code 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'); 

Bitte, Sie haben keine Ahnung, wie es funktioniert? Vielen Dank!

Answer 1

Danke, aber ich habe es geschafft, es selbst zu lösen.

Nach oben Behälter ich hinzufügen musste:

overflow: hidden; 

und an dem Schieber Behälter:

display: inline-flex; 

So gestapelt es alle divs in einer Zeile und Schieber funktioniert endlich.