Блог

#ошибка горизонтального слайдера — более одного горизонтального слайдера с одинаковыми классами с собственным JavaScript, все слайдеры работают вместе, как я могу это решить# ##Этот первый горизонтальный слайдер## «‘
/* Объявляет переменные */

     let moveRight = document.querySelectorAll('.move-right');
    let moveLeft = document.querySelectorAll('.move-left');
    let left = document.querySelector('.move-left');
    let right = document.querySelector('.move-right');
    const slides = document.querySelectorAll('.slide');
    let x = 0;

    /* Function to slide Sliders Divs To left when click on arrow with class = ".move- 
  left"*/
    for(let i = 0; i < moveLeft.length; i  ){
     moveLeft.forEach(function(left){
        left.addEventListener('click', function(){

        x  ;
        for (let i = 0; i < slides.length; i  ){
            if(x==0) {slides[i].style.left = "0px";}
            if(x==1) {slides[i].style.left = "-320px";}
            if(x==2) {slides[i].style.left = "-640px";}
            if(x==3) {slides[i].style.left = "-960px";}
            if(x==4) {slides[i].style.left = "-1280px";}
            if(x==5) {slides[i].style.left = "-1600px";}

            if(x>5) {x=5;}
        }
      })});
    }
   /* Function to slide Sliders Divs To Right  when click on arrow with class = ".move- 
  right"*/

    for(let i = 0; i < moveRight.length; i  ){
      moveRight.forEach(function(right){
        right.addEventListener('click', function(){

        x--;
        for (let i = 0; i < slides.length; i  ){
            if(x==0) {slides[i].style.left = "0px";}
            if(x==1) {slides[i].style.left = "-320px";}
            if(x==2) {slides[i].style.left = "-640px";}
            if(x==3) {slides[i].style.left = "-960px";}
            if(x==4) {slides[i].style.left = "-1280px";}

       if(x < 0) {x=0;}

  }
 })});
}
 

»’

Вы не добавили HTML-код, но я предполагаю, что у вас есть раздел или тег div, внутри которого у вас есть слайды и кнопки влево/вправо. Вы можете немного изменить свой код, чтобы нацеливать слайды только в контейнере. Таким образом, даже если у вас несколько ползунков, будет работать только тот ползунок, на кнопки которого вы нажимаете.

 left.addEventListener('click', function(event){
    // Assuming the parent div has a class of container
    const container = event.target.closest('.container');
    // Selecting only those slides that are a part of the container where the button has been clicked
    const slides = container.querySelectorAll('.slides');
    // Rest of your logic goes here
});

 

HTML будет выглядеть примерно так

 <div class='container'>
    <div class='slide'>Content here</div>
    <button class='move-left'>Left</button>
    <button class='move-right'>Right</button>
</div>
 

Примечание: Функция closest() не работает в IE, и вам, возможно, придется добавить для нее заполнение, если вы хотите поддерживать IE.