0

есть макет слайдера http://joxi.ru/L21aleyIgl65D2. Подскажите плагин для реализации такого.

1 ответ 1

0

Вот хороший слайдер с большим количеством настроек 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.