Swiper js - 如何更改所選幻燈片的背景顏色

Question

我想要做的是，在訪問鏈接時更改所選幻燈片的背景顏色。 例如，如果在新頁面上訪問戶外鏈接，我希望突出顯示幻燈片背景，以便用戶可以了解他們在哪個部分。

<div class="swiper mySwiperAnimationCollection home-page-animation-collection-div">
  <div class="swiper-wrapper">
    
    <div class="swiper-slide">
      <a href="https://arditicollection.com/collections/outdoor-spaces-furniture" >
        <img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/outdoor-collection.png?v=1672413080"
          alt="Arditi Collection® OUTDOORS">
      </a>
        <a href="https://arditicollection.com/collections/end-side-tables"><p class="collectionTitleP">OUTDOORS</p></a>
    </div>
    
    <div class="swiper-slide">
      <a href="https://arditicollection.com/collections/dining-tables" >
        <img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/Dining_Tables_Border.png?v=1670939498"
          alt="Arditi Collection® DINING TABLES">
      </a>
        <a href="https://arditicollection.com/collections/end-side-tables"><p class="collectionTitleP">DINING TABLES</p></a>
    </div>

    <div class="swiper-slide">
      <a href="https://arditicollection.com/collections/dining-chairs" >
        <img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/Dining_Chairs_Border.png?v=1670939510"
          alt="Arditi Collection® DINING CHAIRS">
      </a>
        <a href="https://arditicollection.com/collections/end-side-tables"><p class="collectionTitleP">DINING CHAIRS</p></a>
    </div>

</div>
</div>



<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiperAnimationCollection", {
    slidesPerView: 10.5,
    spaceBetween: 5,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
      autoplay: {
    delay: 3000,
  },
    breakpoints: {
      320: {
        slidesPerView: 3.5,
        spaceBetween: 5
      },
      768: {
        slidesPerView: 5.5,
        spaceBetween: 5
      },
      1024: {
        slidesPerView: 10.5,
        spaceBetween: 5
      }
    }
  });
</script>

Answer 1

最簡單的方法是使用幻燈片 Active Class ( API docs )：

.swiper-slide.swiper-slide-active{
  background: red;
}

片段：

 var swiper = new Swiper(".swiper", { slidesPerView: 3, loop: true, spaceBetween: 30, pagination: { el: ".swiper-pagination", clickable: true, }, });

 .swiper-slide.swiper-slide-active{ background: red; } html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; }.swiper { width: 100%; height: 100%; }.swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } [scroll]{ min-height: 100vh; background: gray; }

 <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet"/> <div class="swiper mySwiper"> <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>