我正在努力改变封面流程中的刷卡器幻灯片轮播。
这就是我现在得到的。
var mySwiper = new Swiper('.swiper-container-aboutus', {
// Optional parameters
effect: 'coverflow',
loop: true,
centeredSlides: true,
slidesPerView: 3,
initialSlide: 0,
keyboardControl: true,
mousewheelControl: true,
lazyLoading: true,
preventClicks: false,
preventClicksPropagation: false,
lazyLoadingInPrevNext: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
coverflow: {
rotate: 0,
stretch: 0,
depth: 250,
modifier: 1,
slideShadows: false,
}
})
.swiper-container-aboutus {
height: 500px;
}
.swiper-slide{
background-color: rgb(255, 0, 0);
width: 490px;
z-index: 1;
transition-duration: 0ms;
display: inline-block;
overflow: hidden;
height: 490px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<div class="row swiper-container-aboutus">
<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 class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
它的功能,但我想改变轮播看起来像这样:
我试过添加这段代码:
.swiper-slide{
background-color: rgb(255, 0, 0);
width: 490px;
z-index: 1;
transition-duration: 0ms;
display: inline-block;
overflow: hidden;
height: 490px;
transform: rotate(45deg) !important;
}
我添加了 transform: rotate(45deg) !important;
以将幻灯片转换成菱形并且它们被转换了,但是我失去了内置的 swiper.js translate3d()
函数。
是否可以使用 Swiper.js 以这种方式编辑幻灯片并且仍然让封面流程正常工作?
非常欢迎任何其他提示。
编辑
当我放
loop:true;
centeredSlides: true,
slidesPerView: 3,
initialSlide: 2,
我的封面流程从左侧开始,而不是像我希望的那样从中间开始。 这是为什么?在照片上你可以看到它,当我点击下一个时它会移到右侧。
可以居中开始吗?我认为这个 centeredSlides: true
会做到这一点。
最佳答案
var mySwiper = new Swiper('.swiper-container-aboutus', {
// Optional parameters
effect: 'coverflow',
loop: true,
centeredSlides: true,
slidesPerView: 3,
initialSlide: 0,
keyboardControl: true,
mousewheelControl: true,
lazyLoading: true,
preventClicks: false,
preventClicksPropagation: false,
lazyLoadingInPrevNext: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
coverflow: {
rotate: 0,
stretch: 0,
depth: 250,
modifier: 1,
slideShadows: false,
}
})
.swiper-container-aboutus {
height: 200px;
}
.swiper-slide {
width: 60px;
z-index: 1;
transition-duration: 0ms;
display: inline-block;
height: 60px;
}
.slide-content {
background-color: rgb(255, 0, 0);
height: 100%;
border: 1px solid;
transform: rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<div class="row swiper-container-aboutus">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-content">
Slide 1
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
Slide 2
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
Slide 3
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
Slide 4
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
关于javascript - 如何在 swiper.js 中更改 swiper 幻灯片轮播?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55744630/