Как изменить поток рендеринга слайдов в Swiper Cover Flow Slider

Установил Swiper в моем проекте после

https://idangero.us/swiper/api/#coverflow-эффект

Я хотел бы использовать эффект обтекания, как в этом примере:

https://codepen.io/addzycullen/pen/kXKKBZ

Я установил Swiper и добавил в проект CSS, JS CDN.

 var mySwiper = new Swiper ('.swiper-container-aboutus', {
    // Optional parameters
    effect: 'coverflow',
    loop: true,
    centeredSlides: true,
    slidesPerView: 3,
    initialSlide: 3,
    keyboardControl: true,
    mousewheelControl: true,
    lazyLoading: true,
    preventClicks: false,
    preventClicksPropagation: false,
    lazyLoadingInPrevNext: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    coverflow: {
      rotate: 0,
      stretch: 0,
      depth: 250,
      modifier: 1,
      slideShadows : false,
    }
  })

.swiper-container-aboutus {
  height: 400px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "row swiper-container-aboutus">
  <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>
  <div class = "swiper-pagination"></div>
  <div class = "swiper-button-prev"></div>
  <div class = "swiper-button-next"></div>

  <div class = "swiper-scrollbar"></div>
</div>
</div>

script.js

Добавили эту часть как jQuery:

$(document).ready(function () {

  var mySwiper = new Swiper ('.swiper-container-aboutus', {

    effect: 'coverflow',
    loop: true,
    centeredSlides: true,
    slidesPerView: 3,
    initialSlide: 3,
    keyboardControl: true,
    mousewheelControl: true,
    lazyLoading: true,
    preventClicks: false,
    preventClicksPropagation: false,
    lazyLoadingInPrevNext: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    coverflow: {
      rotate: 0,
      stretch: 0,
      depth: 250,
      modifier: 1,
      slideShadows : false,
    }
  })
});

Из фрагмента кода видно, что я добился эффекта обтекания, но не так, как хотелось бы.

Я не уверен, что мне не хватает, любой совет очень ценится.

javascript jquery html css

17.04.2019 11:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 666

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь у вас другая версия Swiper: 4.5.0, в примере кода: 3.3.1 - проверьте ИЗМЕНЕНИЙ, чтобы найти различия.

После смены версии Swiper работает хорошо! Спасибо друг! :) Может быть, вы знаете, как я могу сделать так, чтобы мой Slide1 отображался первым? Так как теперь он начинается с Slide4.

— 17.04.2019 12:29

Измените значение «initialSlide» на 0 вместо 3

— 17.04.2019 12:32

Работает как шарм :) Спасибо!

— 17.04.2019 12:41

17.04.2019 12:16