Swiper JS技术问题：如何修改选中幻灯片的背景颜色

要实现访问对应链接后，对应Swiper幻灯片高亮背景的效果，可按以下步骤修改代码：

1. 修正HTML中的链接错误并添加标识 #

原代码里每个幻灯片的标题链接都错误指向了同一集合，需将标题的href改为对应幻灯片的正确链接；同时为每个swiper-slide添加data-collection属性，存储对应集合的路径片段，用于后续匹配：

<div class="swiper mySwiperAnimationCollection home-page-animation-collection-div">
  <div class="swiper-wrapper">
    
    <div class="swiper-slide" data-collection="/collections/outdoor-spaces-furniture">
      <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/outdoor-spaces-furniture"><p class="collectionTitleP">OUTDOORS</p></a>
    </div>
    
    <div class="swiper-slide" data-collection="/collections/dining-tables">
      <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/dining-tables"><p class="collectionTitleP">DINING TABLES</p></a>
    </div>

    <div class="swiper-slide" data-collection="/collections/dining-chairs">
      <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/dining-chairs"><p class="collectionTitleP">DINING CHAIRS</p></a>
    </div>

</div>
</div>

2. 添加高亮样式 #

在CSS中定义选中幻灯片的背景高亮样式，可根据网站风格自定义颜色：

.swiper-slide.highlighted {
  background-color: #f5f5f5;
  border-radius: 6px; /* 可选，优化视觉效果 */
}

3. 修改JS逻辑实现自动匹配高亮 #

在Swiper初始化完成后，获取当前页面路径，匹配对应幻灯片并添加高亮类，同时可让Swiper自动滚动到该幻灯片：

<!-- 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
      }
    },
    // 初始化完成后执行匹配逻辑
    on: {
      init: function() {
        highlightCurrentSlide();
      }
    }
  });

  function highlightCurrentSlide() {
    // 获取当前页面路径
    const currentPath = window.location.pathname;
    // 匹配对应幻灯片
    const targetSlide = document.querySelector(`.swiper-slide[data-collection="${currentPath}"]`);
    
    if (targetSlide) {
      // 添加高亮类
      targetSlide.classList.add('highlighted');
      // 滚动到目标幻灯片（可选）
      const slideIndex = Array.from(targetSlide.parentElement.children).indexOf(targetSlide);
      swiper.slideTo(slideIndex);
    }
  }
</script>

注意事项 #

• data-collection属性的路径需和页面实际路径完全一致，确保匹配准确
• 高亮颜色、圆角样式可根据需求调整
• slideTo方法为可选功能，用于自动滚动到高亮幻灯片，提升用户浏览体验

内容的提问来源于stack exchange，提问作者mbkadoglu