0

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

<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 код на переход на первый слайдер идентичен

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

3
  • Я думаю,что проблема из за того что инициализация слайдера происходит при загрузке сразу, и инициализация слайдера происходит до того как вы добавили новые слайды в слайдер. Сделайте так: при вызове модального окна 1. Добавляете слайды в слайдер. 2. Потом уже делаете инициализацию слайдера. Тоесть при открытии попапа делайте инициализацию а не сразу при загрузке страницы. Если данный вариант поможет - напишите, напишу в ответ.
    – EVG
    4 фев 2019 в 9:31
  • я не совсем понимаю как мне сделать по другому инициализацию?
    – Big D
    4 фев 2019 в 10:08
  • Инициализировать слайдер уже после того как добавили в него новые элементы. А так, конечно работать ничего нормально не будет,если слайды вы добавляете после инициализации.
    – EVG
    4 фев 2019 в 14:06

2 ответа 2

0

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

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>

0

let allSliders = document.querySelectorAll('.wework-slider');
for (let i = 0; i < allSliders.length; i++) {
  let slider = allSliders[i];
  console.log(slider);
  let swiper2_class = 'myswiper2_' + i;
  let swiper1_class = 'myswiper_' + i;

  slider.querySelector('.mySwiper2').classList.add(swiper2_class);
  slider.querySelector('.mySwiper').classList.add(swiper1_class);

  var swiper = new Swiper(.${swiper1_class}, {
    spaceBetween: 10,
    slidesPerView: 5,
    freeMode: true,
    watchSlidesProgress: true,
    breakpoints: {
      // when window width is >= 320px
      320: {
        slidesPerView: 4,
        spaceBetween: 5
      },
      // when window width is >= 480px
      590: {
        slidesPerView: 5,
        spaceBetween: 10
      }
    }
  });
  var swiper2 = new Swiper(.${swiper2_class}, {
    spaceBetween: 10,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    thumbs: {
      swiper: swiper,
    },
  });
}

1
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 25 июн 2023 в 18:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.