Как установить 2 слайдера SwiperJs на страницу?

Question

[Андрей Котосин]

Есть в Bootstrap 4 у меня панели со вкладками.
Нужно в каждый tab-pane установить свой слайдер SwiperJS v5.3.0

Есть html...

<div class="col">
  <ul class="nav nav-pills mb-3 nav-justified" id="pills-tab" role="tablist">
    <li class="nav-item ml-5">
      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Первая вкладка</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Вторая вкладка</a>
    </li>
    <li class="nav-item mr-5">
      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Третья вкладка</a>
    </li>
  </ul>
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
      <div class="swiper-container p-5">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            slide1
          </div>
          <div class="swiper-slide">
            slide2
          </div>
          <div class="swiper-slide">
            slide3
          </div>
          <div class="swiper-slide">
            slide4
          </div>
          <div class="swiper-slide">
            slide5
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
      <div class="swiper-container p-5">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            slide2-1
          </div>
          <div class="swiper-slide">
            slide2-2
          </div>
          <div class="swiper-slide">
            slide2-3
          </div>
          <div class="swiper-slide">
            slide2-4
          </div>
          <div class="swiper-slide">
            slide2-5
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
      <div class="swiper-container p-5">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            slide3-1
          </div>
          <div class="swiper-slide">
            slide3-2
          </div>
          <div class="swiper-slide">
            slide3-3
          </div>
          <div class="swiper-slide">
            slide3-4
          </div>
          <div class="swiper-slide">
            slide3-5
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </div>
</div>

Есть js:

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 100,
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });

Мне нужно что бы при переходе между табами слайдер работал нормально.
P.S. Первый таб работает при загрезке. При переключении на другой - слайдер слетает, не хочет кликаться стрелки и пропадает пагинации (точки под слайдером).

Помогите пожалуйста решить задачу, нужно 2-3 слайдера на 1 странице.

ЗАДАЧА БЫЛА РЕШЕНА
Кому интересно - смотрите как я это реализовывал https://codepen.io/sivis/pen/mdJdmra

Comments

[Kovalsky]

Это конечно абсолютно уникальный топик, никому никогда не нужно было два свайпера на одной странице; и конечно же такой вопрос на тостере ещё никто не задавал

[Андрей Котосин]

Kovalsky, я создал https://codepen.io/sivis/pen/mdJdmra и попробовал множество различных вариантов, но к сожалению они не решают мою задачу совместимости bootstrap 4 tab-pane и SwiperJs.

В остальных случаях, решения вполне подходят. Но при работе с табами - не один из Вариатов "гугла" пока не подошел. Именно поэтому я решил создать топик, что бы могли мне помочь.

[Kovalsky]

Андрей Котосин, тогда извините мою резкость, кажется действительно никто на планете не сталкивался с этой проблемой

[Андрей Котосин]

Kovalsky, Извиняю. Нет проблем чувак. Хочу сказать тебе большое спасибо за видео-урок по использованию гугла. Это действительно мне помогло. Обновил https://codepen.io/sivis/pen/mdJdmra что бы при необходимости другие могли найти решение.

[Kovalsky]

Андрей Котосин, обращайтесь! Люблю это дело, оно для меня типа хобби - когда я хочу расслабиться я просто захожу на тостер и записываю гифки в которых я просто копирую заголовки вопросов в гугл (и это помогает!).

В ответ тоже добавьте пример.

И кстати вы в итоге сделали реинициализацию слайдеров вручную или observe/observeParents?