Как изменить карусель swiper slide в swiper.js? - PullRequest
Новая
       28

Как изменить карусель swiper slide в swiper.js?

0 голосов
/ 18 апреля 2019

Я борюсь с изменением карусели скользящих слайдов в потоке покрытия.

Это то, что я получил сейчас. 

var mySwiper = new Swiper('.swiper-container-aboutus', {
  // Optional parameters
  effect: 'coverflow',
  loop: true,
  centeredSlides: true,
  slidesPerView: 3,
  initialSlide: 0,
  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: 500px;
}

.swiper-slide{
  background-color: rgb(255, 0, 0);
    width: 490px;
    z-index: 1;
    transition-duration: 0ms;
    display: inline-block;
    overflow: hidden;
    height: 490px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<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>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

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

Это работает, но я бы хотел изменить карусель так:

enter image description here

Я пытался добавить этот кусок кода: 

.swiper-slide{
    background-color: rgb(255, 0, 0);
    width: 490px;
    z-index: 1;
    transition-duration: 0ms;
    display: inline-block;
    overflow: hidden;
    height: 490px;
    transform: rotate(45deg) !important;
}

Я добавил transform: rotate(45deg) !important;, чтобы преобразовать слайды в форме ромба, и они были преобразованы, но с этим я потерял встроенную функцию swiper.js translate3d().

Возможно ли с помощью Swiper.js редактировать слайды таким образом, и при этом поток обложки работает, как должен?

Любые другие советы приветствуются.

EDIT

Когда я ставлю 

loop:true;
centeredSlides: true,
slidesPerView: 3,
initialSlide: 2,

Мой поток укрытия начинается с левой стороны, а не с середины, как хотелось бы. Это почему? На фото это видно, и когда я нажимаю на следующий, он смещается вправо.

enter image description here

Можно ли начать по центру? Я думал, что это centeredSlides: true сделает это.

1 Ответ

0 голосов
/ 18 апреля 2019 

var mySwiper = new Swiper('.swiper-container-aboutus', {
  // Optional parameters
  effect: 'coverflow',
  loop: true,
  centeredSlides: true,
  slidesPerView: 3,
  initialSlide: 0,
  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: 200px;
}

.swiper-slide {
  width: 60px;
  z-index: 1;
  transition-duration: 0ms;
  display: inline-block;
  height: 60px;
}

.slide-content {
  background-color: rgb(255, 0, 0);
  height: 100%;
  border: 1px solid;
  transform: rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<div class="row swiper-container-aboutus">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-content">
        Slide 1
      </div>
    </div>
    <div class="swiper-slide">
      <div class="slide-content">
        Slide 2
      </div>
    </div>
    <div class="swiper-slide">
      <div class="slide-content">
        Slide 3
      </div>
    </div>
    <div class="swiper-slide">
      <div class="slide-content">
        Slide 4
      </div>
    </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>

tadaa!

...