Как сделать слайдер в слайдере в Swiper

Question

В макете есть такой слайдер, при наведении на слайд появляется карусель.

Я написал такой код, но оно не работает - внутренний слайдер не появляется.

  <div class="project container">
         <div class="row">
            <div class="col-md-3">
               <h2>Новые проекты</h2>
               <p class="section-text">Умеем наполнять смыслом простые вещи, демонстрировать нужное отношение к объекту подарка</p>
               <a href="" class="button btn-second">Все проекты <img src="img/right.svg" class="down" alt=""></a>
            </div>
            <div class="col-md-9">
               <div class="swiper-scrollbar"></div>
               <div class="swiper gallery">
                  <div class="swiper-wrapper">
                     <div class="swiper-slide gallery-item">
                        <div class="swiper mini-gallery">
                           <div class="swiper-wrapper">
                              <div class="mini-gallery-item"></div>
                              <div class="mini-gallery-item"></div>
                              <div class="mini-gallery-item"></div>
                           </div>
                           <div class="swiper-pagination"></div>
                        </div>
                     </div>
                     <div class="swiper-slide gallery-item"></div>
                     <div class="swiper-slide gallery-item"></div>
                     <div class="swiper-slide gallery-item"></div>
                     <div class="swiper-slide gallery-item"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Swiper JS -->
      <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
      <script>
         var swiper = new Swiper(".gallery", {
            slidesPerView: 3,
           spaceBetween: 24,
           scrollbar: {
             el: ".swiper-scrollbar",
           },
         });
         
           var swiper2 = new Swiper(".mini-gallery", {
           pagination: {
             el: ".swiper-pagination",
           },
         });
      </script>
   </body>
</html>

Может я делаю что-то не так?

Answer 1

Основная проблема в том, что внутри .swiper.mini-gallery отсутствует класс .swiper-slide, после инициализации swiper будет игнорировать любые элементы.

Решение 1

Добавить блокам .mini-gallery-item класс swiper-slide.

Решение 2

Прописать в параметрах другой класс слайдов, для это используется параметра slideClass, так же данному блоку придётся указать те же стили, что использует стандартный .swiper-slide.

Ну и написал код слайдера, не знаю зачем ¯\_(ツ)_/¯

const main = new Swiper('.main-slider', {
    slidesPerView: 3,
    spaceBetween: 20,
})

new Swiper('.swiper-carousel', {
  slideClass: 'swiper-carousel__slide',
    slidesPerView: 1,
    spaceBetween: 20,
    pagination: {
    el: '.swiper-carousel__pagination',
    type: 'bullets',
  },
    autoplay: {
        delay: 1500
    }
}).autoplay.stop()

main.slides.forEach(function(slide) {
    const carousel = slide.querySelector('.swiper-carousel');
    if(carousel) {
        slide.addEventListener('mouseenter', function() {
            carousel.swiper.autoplay.start();
        })
        
        slide.addEventListener('mouseleave', function() {
            carousel.swiper.autoplay.stop();
        })
    }
})

@import url("https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css");

.main-slider {
  display: block;
  width: 600px;
  height: 300px;
  text-align: center;
  line-height: 300px;
}

.main-slider__slide {
  display: block;
  width: 100%;
  height: 100%;
  background: #ccc;
}

.swiper-slide-1 {width: 100%}

.main-slider__slide:hover {
  background-color: #aaa;
}

.main-slider .swiper-carousel {
  display: block;
  width: 100%;
  height: 100%;
  background: #ae8282;
}

.main-slider .swiper-carousel__slide {
  flex-shrink: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.main-slider .swiper-carousel__pagination {
  display: none;
  position: absolute;
  line-height: 1;
}

.main-slider__slide:hover .swiper-carousel__pagination {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper main-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide main-slider__slide">
      <div class="swiper swiper-carousel">
        <div class="swiper-wrapper">
          <div class="swiper-carousel__slide">1.1</div>
          <div class="swiper-carousel__slide">1.2</div>
          <div class="swiper-carousel__slide">1.3</div>
        </div>
        <div class="swiper-carousel__pagination"></div>
      </div>
    </div>
    <div class="swiper-slide main-slider__slide">2</div>
    <div class="swiper-slide main-slider__slide">3</div>
    <div class="swiper-slide main-slider__slide">4</div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать слайдер в слайдере в Swiper

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