В макете есть такой слайдер, при наведении на слайд появляется карусель.
Я написал такой код, но оно не работает - внутренний слайдер не появляется.
<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>
Может я делаю что-то не так?