Два слайдера на одной странице

107

17 сентября 2019, 10:00

на странице есть два вот таких блока:

<section class="slider__section" id="slider1">
    <div class="block__slides slides-active MS-content" id="slider1-content">
        <div class="block__slide slide-active item"></div>
        <div class="block__slide slide-active item"></div>
        <div class="block__slide slide-active item"></div>
        <div class="block__slide slide-active item"></div>
        <div class="block__slide slide-active item"></div>
    </div>
</section>

<section class="slider__section" id="slider2">
    <div class="block__slides " id="slider2-content">
        <div class="block__slide "></div>
        <div class="block__slide "></div>
        <div class="block__slide "></div>
        <div class="block__slide "></div>
        <div class="block__slide "></div>
    </div>
</section>

эта два блока размещены как TABы. Те это две вкладки, при нажатии на одну видно одну при нажатии на вторую видно вторую.

так вот при нажатии на вкладку срабатывает такой код:

    buttonTub2.onclick = function(){
    buttonTub1.classList.remove("active-tab");
    buttonTub2.classList.add("active-tab");
    slider1.classList.remove("slides-active");
    slider1.classList.remove("MS-content");
    slider2.classList.add('slides-active');
    slider2.classList.add('MS-content');
    document.querySelectorAll('#slider1 .slide-active').forEach(n => 
n.classList.remove('slide-active'));
    document.querySelectorAll('#slider1 .item').forEach(n => 
n.classList.remove('item'));
    document.querySelectorAll('#slider2 .block__slide').forEach(n => 
n.classList.add('slide-active'));
    document.querySelectorAll('#slider2 .block__slide').forEach(n => 
n.classList.add('item'));
}

этот код добавляет классы к элементам второго слайдера и убирает их у первого, таким образом первый слайдер исчезает а второй появляется.

Я подключаю готовый плагин слайдера.

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

инициализация слайдера происходит по ID вот так:

<script>
    <!-- Initialize the plugin -->
    $('#slider1').multislider();
    <!-- Initialize with options, if needed -->
    $('#slider1').multislider({
        interval:5000,
        slideAll:true
    });
</script>
 <script>
    <!-- Initialize the plugin -->
    $('#slider2').multislider();
    <!-- Initialize with options, if needed -->
    $('#slider2').multislider({
        interval:5000,
        slideAll:true
    });
</script>

Как сделать чтобы заработало? Не понимаю где ошибка? Нужно перезагружать страницу? Он не сразу видит DOM элементы или при модификации теряет их?

классы .MS-content и .item это встроенные классы для работы слайдера.

JS код на переход на первый слайдер идентичен

Пожалуйста помогите сижу два дня

Answer 1

Сделал прототип, посмотрите как устроено:

const tab1 = $("#tab1"); 
const tab2 = $("#tab2"); 
 
const greenSlider = $(".slider.green"); 
const blueSlider = $(".slider.blue"); 
 
$('#slider1').multislider({ 
  interval: 1250 
}); 
 
$('#slider2').multislider({ 
  interval: 1750 
}); 
 
tab1.on("click", function() { 
  tab1.addClass("active"); 
  tab2.removeClass("active"); 
  greenSlider.addClass("active"); 
  blueSlider.removeClass("active"); 
}); 
 
tab2.on("click", function() { 
  tab2.addClass("active"); 
  tab1.removeClass("active"); 
  blueSlider.addClass("active"); 
  greenSlider.removeClass("active"); 
});

body { 
  margin: 0; 
  max-width: 250px; 
} 
 
.tabs { 
  display: flex; 
  list-style: none; 
  margin: 0; 
  padding: 0; 
} 
 
.tab.active { 
  background-color: yellow; 
} 
 
.slider:not(.active) { 
  display: none; 
} 
 
.slider .slider__body { 
  display: flex; 
  overflow: hidden; 
} 
 
.slider .item { 
  flex-shrink: 0; 
  color: white; 
  height: 50px; 
  width: 50px; 
} 
 
.slider.green .item { 
  background-color: green; 
} 
 
.slider.blue .item { 
  background-color: blue; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <title>Sliders in tabs (example)</title> 
  <meta charset="utf-8"> 
</head> 
 
<body> 
  <ul class="tabs"> 
    <li> 
      <button class="tab active" id="tab1">Tab 1</button> 
    </li> 
    <li> 
      <button class="tab" id="tab2">Tab 2</button> 
    </li> 
  </ul> 
  <section class="slider green active"> 
    <h4>Slider 1</h4> 
    <div id="slider1"> 
      <div class="slider__body MS-content"> 
        <div class="item">1</div> 
        <div class="item">2</div> 
        <div class="item">3</div> 
        <div class="item">4</div> 
        <div class="item">5</div> 
        <div class="item">6</div> 
        <div class="item">7</div> 
        <div class="item">8</div> 
        <div class="item">9</div> 
        <div class="item">10</div> 
      </div> 
    </div> 
  </section> 
  <section class="slider blue"> 
    <h4>Slider 2</h4> 
    <div id="slider2"> 
      <div class="slider__body MS-content"> 
        <div class="item">1</div> 
        <div class="item">2</div> 
        <div class="item">3</div> 
        <div class="item">4</div> 
        <div class="item">5</div> 
        <div class="item">6</div> 
        <div class="item">7</div> 
        <div class="item">8</div> 
        <div class="item">9</div> 
        <div class="item">10</div> 
      </div> 
    </div> 
  </section> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
  <script src="https://www.multislider.info/js/multislider.min.js"></script> 
</body> 
 
</html>