Два синхронных слайдера bootstrap

Question

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

P.S использование bootstrap необязательна, подойдут и другие решения

Текущая верстка:

<div class="slider-container">
  <div id="carouselExampleControls" class="carousel slide">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://avatars.dzeninfra.ru/get-zen_doc/1722013/pub_60b19632bf8e387a9236bfe3_60b197110d73310cf0bda002/scale_1200" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://faunistics.com/wp-content/uploads/2019/06/3-9.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://placepic.ru/wp-content/uploads/2020/12/%D0%90%D0%BB%D1%8F%D1%81%D0%BA%D0%B8%D0%BD%D1%81%D0%BA%D0%B8%D0%B9-%D0%BC%D0%B0%D0%BB%D0%B0%D0%BC%D1%83%D1%82-%D1%84%D0%BE%D1%82%D0%BE.jpg" class="d-block w-100" alt="...">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Предыдущий</span>
        </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Следующий</span>
        </button>
  </div>
</div>
<div class="slider-container">
  <div id="carouselExampleControls" class="carousel slide">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://avatars.dzeninfra.ru/get-zen_doc/1722013/pub_60b19632bf8e387a9236bfe3_60b197110d73310cf0bda002/scale_1200" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://faunistics.com/wp-content/uploads/2019/06/3-9.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://placepic.ru/wp-content/uploads/2020/12/%D0%90%D0%BB%D1%8F%D1%81%D0%BA%D0%B8%D0%BD%D1%81%D0%BA%D0%B8%D0%B9-%D0%BC%D0%B0%D0%BB%D0%B0%D0%BC%D1%83%D1%82-%D1%84%D0%BE%D1%82%D0%BE.jpg" class="d-block w-100" alt="...">
      </div>
    </div>
  </div>
</div>

Answer 1

Нашел решение через swiper

ДЕМО

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="swiper-container mySwiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
            </div>
        </div>
  
        <div class="swiper-container mySwiper2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
            </div>
        </div>
  
        <div class="swiper-container mySwiper3">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
            </div>
        </div>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.0/swiper-bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>   
        const swiper1 = new Swiper(".mySwiper1", {});
        const swiper2 = new Swiper(".mySwiper2", {});
        const swiper3 = new Swiper(".mySwiper3", {});

        const swipeAllSliders = (index) => {
            swiper1.slideTo(index);
            swiper2.slideTo(index);
            swiper3.slideTo(index);
        }

        swiper1.on('slideChange', () => swipeAllSliders(swiper1.activeIndex));
        swiper2.on('slideChange', () => swipeAllSliders(swiper2.activeIndex));
        swiper3.on('slideChange', () => swipeAllSliders(swiper3.activeIndex));
    </script>
    </html>

БЛОГ НА HUSL

Два синхронных слайдера bootstrap

Ответы (1 шт):