Блог

Я хочу создать несколько слайд-шоу на одной странице, однако в настоящее время это не работает

Я понимаю, что этот вопрос задавался раньше, но, похоже, я не могу заставить эти ответы работать с моим кодом, у кого-нибудь есть какие-либо предложения? У меня нет большого опыта работы с Javascript

 <div class="bareEditorial">

<div class="slideshow-container" onclick="plusSlides(1)">   

<div class="mySlides fade">
  <div class="image">
    <img src="bareEditorialHero.jpg">
  </div>
    </div>

<div class="mySlides fade">
    <div class="image">
    <img src="bareEditorial2.jpg">
  </div>
    </div>

<div class="mySlides fade">
    <div class="image">
    <img src="bareEditorial3.jpg">
  </div>
    </div>



<div class="ninetydegrees">     
<div class="nextprevious">

  <div class="numbertext">Bare Boutique Editorial 2018 (<span>1</span> / <span>6</span>)</div>
</div>
  

 var slideIndex = 1;
var indexes = document.querySelectorAll(".numbertext span");
var slides = document.getElementsByClassName("mySlides");
indexes[1].innerHTML = slides.length;

showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex  = n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
indexes[0].innerHTML = slideIndex;
for (i = 0; i < slides.length; i  ) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}

$(function() {
  $('body').removeClass('fade-out');
});
  

Учитывая, что вам нужна информация о реализации нескольких слайд-шоу на странице и не вдаваться в подробности работы для каждого, я предлагаю вам иметь контейнер слайд-шоу с уникальным идентификатором для каждого слайд-шоу и вызывать свой метод инициализации для каждого, передавая идентификатор в качестве аргумента.

Создайте метод as initializeSlideshow(containerID) и в нем свяжите методы, например, с кнопкой next как

 function initializeSlideshow(containerID) {
    $('#'   containerID   '.prevLink').on('click', function() {} );
    //rest of your logic
}
  

Другим подходом было бы добавить класс в каждый контейнер и реализовать методы таким образом, чтобы вы захватывали соответствующий контейнер с помощью closest() DOM и управляли им

 $('.containerClass .prevLink').on('click', function() {
    $(this).closest('.containerClass').find('.slideCLass');
});
  

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

 $('.slideshowContainer').initializeSlideshow( {
    //slideshow options.
})
  

Который может быть реализован как

 $.fn.initializeSlideshow = function(slideshowOptions) {
    //your logic where reference to this (object on which the method is called) is available
}