Вертикальная карусель с несколькими высотами Javascript (и Swiper. js) - PullRequest
Новая
       41

Вертикальная карусель с несколькими высотами Javascript (и Swiper. js)

1 голос
/ 23 марта 2020

Я создаю вертикальный слайдер , и мне нужно, чтобы один слайд был больше, чем другие. Я обычно использую Flickity, но поскольку он не поддерживает вертикальные слайды, я использую Swiper. js.

Дело в том, что все строки должны быть одинакового размера, но это не мое дело. Что я сделал, так это создал ячейку, которая в 2 раза больше обычного слайда, и затем отследил, собираюсь ли я перейти к этой ячейке, а затем переместил два слайда, поэтому я пропускаю один, который не используется.

Проблема в том, что последний скрыт. Я добавил один дополнительный, а затем скрыл последний. Я знаю, что это очень сложное решение.

Я думаю, что могут быть более эффективные способы, поэтому я хотел спросить, считаете ли вы, что моё решение может быть улучшено? Я присваиваю вам код:

https://codepen.io/scros/pen/LYVJKrQ

var swiper = new Swiper(".swiper-container", {
  direction: "vertical",
  slidesPerView: 4,
  spaceBetween: 15,

  // slidesPerGroup: 2,
  cssMode: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  }
});
console.log(swiper.params);

swiper.on("slideNextTransitionStart", function() {
  console.log("slide changed");
  console.log(swiper.activeIndex);

  if (swiper.activeIndex === 1) {
    swiper.slideTo(2, 700);
  }
});

swiper.on("slidePrevTransitionStart", function() {
  console.log("slide changed");
  console.log(swiper.activeIndex);

  if (swiper.activeIndex === 1) {
    swiper.slideTo(0, 700);
  }
});
.swiper-container {
  width: 600px;
  height: 500px;
  overflow: hidden;
}

.swiper-slide {
  border-radius: 0.3rem;
  font-size: 18px;
  color: white;
  background-color: #8ec5fc;
  background-image: linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide1 {
  padding: 4rem 0;
}

.wrapper {
  background-color: #eef2f7;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
<link href="https://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/js/swiper.min.js"></script>
<div class="wrapper">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide1">
        <h1>Big Slide</h1>
      </div>
      <div class="swiper-slide 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 class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
      <div class="swiper-slide"></div>
    </div>
  </div>
</div>

Спасибо!

...