есть макет слайдера http://joxi.ru/L21aleyIgl65D2. Подскажите плагин для реализации такого.
1 ответ
Вот хороший слайдер с большим количеством настроек swiperjs
Так же вот примерный вариант, только нужно настроить верстку codepen
$(document).ready(function() {
// Assign some jquery elements we'll need
var $swiper = $(".swiper-container");
var $bottomSlide = null; // Slide whose content gets 'extracted' and placed
// into a fixed position for animation purposes
var $bottomSlideContent = null; // Slide content that gets passed between the
// panning slide stack and the position 'behind'
// the stack, needed for correct animation style
var mySwiper = new Swiper(".swiper-container", {
spaceBetween: 30,
slidesPerView: 3,
centeredSlides: true,
roundLengths: true,
loop: true,
loopAdditionalSlides: 30,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
});
body{
display:flex;
align-items:center;
justify-content:center;
height:100vh;
width:100vw;
}
.swiper-container {
position:relative;
width: 90vw;
height: 300px;
}
.swiper-container > .swiper-slide__content {
position:absolute;
top:0;
}
.swiper-slide {
height: 300px;
display:flex;
background: #eee;
align-items: center;
justify-content:center;
transition:all 200ms linear;
transform: scale(0.8);
&.swiper-slide-active{
transform: scale(1);
background: #fc0
}
}
.swiper-slide__content {
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<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>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>