Слайдер открывает все фото которые есть на странице как исправить?

04 декабря 2020, 08:10

var slideIndex = 1; 
showDivs(slideIndex); 
 
function plusDivs(n) { 
  showDivs(slideIndex += n); 
} 
 
function showDivs(n) { 
  var i; 
  var x = document.getElementsByClassName("mySlides"); 
  if (n > x.length) { 
    slideIndex = 1 
  } 
  if (n < 1) { 
    slideIndex = x.length 
  }; 
  for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
  } 
  x[slideIndex - 1].style.display = "block"; 
}

<div class="first_slider"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/1/"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/2/"> 
  <button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button> 
  <button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button> 
</div> 
<div class="second_slider"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/3/"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/4/"> 
  <button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button> 
  <button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button> 
</div>

Использую на странице несколько слайдеров. Но фото 1 слайдера можно посмотреть в 2 слайдере и наоборот. Я попытался ограничить количество фото которые открывает слайдер до 2, но не получается. Как это можно исправить?

Answer 1

В вашем случае можно использовать передачу контейнера, что бы разграничить поиск слайдов в конкретном слайдере.

Но по хорошему, ваш код надо переписать, что бы он использовал объектный подход.

var slideIndex = 1; 
showDivs('.first_slider', slideIndex); 
showDivs('.second_slider', slideIndex); 
 
function plusDivs(container, n) { 
  showDivs(container, slideIndex += n); 
} 
 
function showDivs(container, n) { 
  var i; 
  var x = document.querySelectorAll(container + " .mySlides"); 
  if (n > x.length) { 
    slideIndex = 1 
  } 
  if (n < 1) { 
    slideIndex = x.length 
  }; 
  for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
  } 
  x[slideIndex - 1].style.display = "block"; 
}

<div class="first_slider"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/1/"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/2/"> 
  <button class="w3-button w3-display-left" onclick="plusDivs('.first_slider',-1)">&#10094;</button> 
  <button class="w3-button w3-display-right" onclick="plusDivs('.first_slider',+1)">&#10095;</button> 
</div> 
<div class="second_slider"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/3/"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/4/"> 
  <button class="w3-button w3-display-left" onclick="plusDivs('.second_slider', -1)">&#10094;</button> 
  <button class="w3-button w3-display-right" onclick="plusDivs('.second_slider',+1)">&#10095;</button> 
</div>

Можно сделать вот таким образом - ООП подход.

function Slider(selector) { 
  this.slideIndex = 0; 
  this.selector = selector; 
  this.container = document.querySelector(this.selector); 
  this.goto(this.slideIndex); 
  const nextBtn = this.container.querySelector('*[data-direction="next"]'); 
  nextBtn.addEventListener('click', () => { 
    this.next(); 
  }); 
  const prevBtn = this.container.querySelector('*[data-direction="prev"]');; 
  prevBtn.addEventListener('click', () => { 
    this.previous(); 
  }); 
} 
 
Slider.prototype.next = function() { 
  this.goto(++this.slideIndex); 
} 
 
Slider.prototype.previous = function() { 
  this.goto(--this.slideIndex); 
} 
 
Slider.prototype.goto = function(index) { 
  const x = this.container.querySelectorAll(".mySlides"); 
  this.slideIndex = index; 
  if (this.slideIndex >= x.length) { 
    this.slideIndex = 0 
  } 
  if (this.slideIndex < 0) { 
    this.slideIndex = x.length - 1; 
  }; 
  for (var i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
  } 
  x[this.slideIndex].style.display = "block"; 
} 
 
const slider1 = new Slider('.first_slider'); 
const slider2 = new Slider('.second_slider');

<div class="first_slider"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/1/"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/2/"> 
  <button data-direction="prev" class="w3-button w3-display-left">&#10094;</button> 
  <button data-direction="next" class="w3-button w3-display-right">&#10095;</button> 
</div> 
<div class="second_slider"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/3/"> 
  <img class="mySlides" src="http://lorempixel.com/150/150/sports/4/"> 
  <button data-direction="prev" class="w3-button w3-display-left">&#10094;</button> 
  <button data-direction="next" class="w3-button w3-display-right">&#10095;</button> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отловить событие перед загрузкой html

Делаю 2 типа менюКакое из них загрузится пользователю решается с помощью js относительно ширины экрана

121

javascript

Изменить значение cookie по второму клику

Как изменить значение cookie по второму клику по элементу?

javascript

Нужно составить регулярное выражение

Есть <input type="text"/> Хочу добавить в атрибут pattern регулярное выражение, чтоб можно было вводить только цифры и можно было указать минимальное...

116

javascript

Кеширование данных и обновление

У меня есть коллекция в mongoDB, я хочу чтобы клиент единожды загрузил ее в кеш и использовал эти данныеНо переодически коллекция обновляется

125