（创建页面，内容为“<includeonly>{{#if:{{#varexists:防止多次加载Swiper}}||{{#vardefineecho:防止多次加载Swiper|{{#widget:swiper}}}}}}<!---->{{#vardefine: paramindex | 1 }}{{#while: | {{#if: {{{ {{#var: paramindex }}| }}} | true }} | {{#vardefine: paramindex | {{#expr: {{#var: paramindex }} + 1 }} }} }} {{#vardefine:slidenum| {{#expr: {{#var:paramindex}} -1 }} }}<!-- -->{{#vardefine:参数|autoHeight:true, {{#switch:{{{联动|主图}}} |主图=effect:'{{{效果|slide}}}…”） |
无编辑摘要 |
||
| （未显示同一用户的1个中间版本） | |||
| 第29行： | 第29行： | ||
.bwiki-swiper-thumbs .swiper-slide-thumb-active, .bwiki-swiper-thumbs .swiper-slide-thumb-active:hover{opacity:1} | .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} | .bwiki-swiper-thumbs .swiper-slide > *{pointer-events:none} | ||
</bstyle>}}}}</includeonly><noinclude></noinclude> | </bstyle>}}}}</includeonly><noinclude>{{帮助:{{PAGENAME}}}}</noinclude> | ||
2024年2月23日 (五) 15:23的最新版本
简单说明
使用说明
<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,
}
}}