Swiper.js — Shadow Cards and Multiple Swiper

如何加入陰影

1. 加入 padding

.swiper {
  padding:
    24px !important;
}

2. 加入 watchSlidesProgress

有顯示的 swiper-slide 會多一個 .swiper-slide-visible

  var swiper = new Swiper(".swiper-" + i, {
    slidesPerView: 4,
    spaceBetween: 24,
    watchSlidesProgress: true
  });

3. 加入 class

.swiper-slide {
    visibility: hidden;
}

.swiper-slide-visible {
    visibility: visible;
}

如何使用多個 swiper

<div class="swiper swiper-0">
  <div class="swiper-wrapper swiper-wrapper-0">
    <div class="swiper-slide"></div>
    .
    .
    <div class="swiper-slide"></div>

    <!-- If we need pagination -->
    <div class="b-4 swiper-pagination swiper-pagination-0"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev swiper-button-prev-0"></div>
    <div class="swiper-button-next swiper-button-next-0"></div>
  </div>
</div>


<div class="swiper swiper-1">
  <div class="swiper-wrapper swiper-wrapper-1">
    <div class="swiper-slide"></div>
    .
    .
    <div class="swiper-slide"></div>

    <!-- If we need pagination -->
    <div class="b-4 swiper-pagination swiper-pagination-1"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev swiper-button-prev-1"></div>
    <div class="swiper-button-next swiper-button-next-1"></div>
  </div>
</div>

const swiper = document.querySelectorAll(".swiper");
const pagination = document.querySelectorAll(".swiper-pagination");
const prev = document.querySelectorAll(".swiper-button-prev");
const next = document.querySelectorAll(".swiper-button-next");

for (let i = 0; i < 2; i++) {
  swiper[i].classList.add("swiper-" + i);
  pagination[i].classList.add("swiper-pagination-" + i);
  prev[i].classList.add("swiper-prev-" + i);
  next[i].classList.add("swiper-next-" + i);
  const swiperClass = new Swiper(".swiper-" + i, {
    slidesPerView: 4,
    spaceBetween: 24,
    pagination: {
      el: ".swiper-pagination-" + i,
      clickable: true
    },
    navigation: {
      nextEl: ".swiper-button-next-" + i,
      prevEl: ".swiper-button-prev-" + i
    },
    watchSlidesProgress: true
  });
}

範例程式碼

https://codepen.io/bnmghjtyu/pen/NWobBvg?editors=1010