简单说明
使用说明
<SyntaxHighlight>
<bstyle> .swiper-button-prev, .swiper-button-next{color:white;top: 0; margin-top: 0;height:100%;outline:none;} .swiper-pagination-bullet-active{background:white;outline:none;} .swiper-pagination{min-height:30px;padding-top:10px;margin-bottom:-10px} .bwiki-swiper{width:100%;height:auto; position:relative;margin-left:auto;margin-right:auto;user-select:none} .swiper-wrapper{height:auto} .swiper-slide{text-align:center;font-size:18px;background:#fff;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;background-size:cover;background-position:center} .swiper-slide img{display:block;width:100%;height:auto;object-fit:cover} .bwiki-swiper-thumbs .swiper-slide{width:25%;height:auto;opacity:0.4;cursor:pointer} .bwiki-swiper-thumbs .swiper-slide:hover{opacity:0.8} .bwiki-swiper-thumbs .swiper-slide-thumb-active, .bwiki-swiper-thumbs .swiper-slide-thumb-active:hover{opacity:1} .bwiki-swiper-thumbs .swiper-slide > *{pointer-events:none} </bstyle> </SyntaxHighlight>
示例
{{#css:
.coverflow .swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
.coverflow .swiper-slide img {
display: block;
width: 100%;
}
}}
{{Swiper
|class=coverflow
|[[File:占位banner-红.png]]
|[[File:占位banner-黄.png]]
|[[File:占位banner-绿.png]]
|[[File:占位banner-蓝.png]]
|[[File:占位banner-紫.png]]
|额外参数=
effect: "coverflow",
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 30,
depth: 100,
modifier: 1,
slideShadows: true,
}
}}