Swiper js的滑块

问题描述

这是一个自动播放滑块。我想在曾经通过的图像和即将出现的图像上添加模糊效果，但不是第一张图像。我怎么能做到这一点？我还想通过使用 javascript 来定位动态样式元素。例如我想定位 z-index 元素

C:\Octave-6.0.92

var swiper = new Swiper(".mySwiper",{
  effect: "coverflow",loop: true,grabCursor: true,centeredSlides: true,slidesPerView: "auto",coverflowEffect: {
    rotate: 20,stretch: 0,depth: 700,modifier: 1,slideShadows: true,},pagination: {
    el: ".swiper-pagination",autoplay: {
    delay: 1000,disableOnInteraction: false,});

html,body {
  position: relative;
  height: 100%;
  ## ---------- 1. List item ##
}

body {
  background: #eee;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
}

您也可以从 workaround 查看。

解决方法

您可以在所有幻灯片上添加 filter: blur(3px) (例如)，然后将活动幻灯片设置为 filter: unset;

.swiper-slide { filter: blur(3px); }
.swiper-slide-active { filter: unset; }

您可以使用 JS 定位活动幻灯片，例如 document.querySelector('.swiper-slide-active').classList.add('my-z-index-class')

（您需要添加一个名为 .my-z-index-class 的 CSS 类才能使本示例正常工作）。