如何解决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 类才能使本示例正常工作)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。