模板:轮播图
编辑
WiKi功能
来自qwiki
阅读：307
更新日期：2022-03-21
最新编辑：Admin
前言
- 轮播图模板常用于首页的banner，能够自动滑动展示多张海报，点击海报可以跳转至相应网页。
模板使用
- 调用该模板的指令如下：
{{轮播图|轮播编号=|高度=|宽度=
|图1=[[File:图片名称.png|link=跳转链接]]
|图2=[[File:图片名称.png|link=跳转链接]]
|图3=[[File:图片名称.png|link=跳转链接]]
|图4=[[File:图片名称.png|link=跳转链接]]
}}
- 其中，轮播编号可以为1，2，3，……，在同一页面中，若存在多个轮播图，需确保多个轮播图具有不同的编号，以此进行区分；
- 用户可以自定义轮播图的宽度，若上传的图片大小与自定义的宽度不同，图片会自动拉伸至定义的宽度
- 建议轮播图不要超过7张图片
- 轮播图使用示例及效果如下所示：
{{轮播图|轮播编号=1|宽度=700px
|图1=[[File:banner.png|link=WIKI申请页面]]
|图2=[[File:banner.png|link=WIKI申请页面]]
|图3=[[File:banner.png|link=WIKI申请页面]]
|图4=[[File:banner.png|link=WIKI申请页面]]
}}
- 示例2：
{{轮播图|轮播编号=2|宽度=600px|高度=50px
|图1=[[File:banner.png|link=WIKI申请页面]]
|图2=[[File:qqwiki.png|link=WIKI申请页面]]
|图3=[[File:banner.png|link=WIKI申请页面]]
|图4=[[File:banner.png|link=WIKI申请页面]]
}}
模板代码（供复制）
- 轮播图模板的代码如下，使用时需要将css复制到相应页面才能使卡片展示出相应样式。（若希望保证该卡片在全站所有页面的样式一致，也可将下述css直接粘贴到全站的Mediawiki:common.css中）
<div id="qwikiCarousel{{#ifeq:{{{轮播编号|}}}||1|{{{轮播编号|}}}}}" class="carousel slide big-carousel" data-ride=carousel data-interval=5000 style="height:{{{高度|}}};width:{{{宽度|}}}"><div class="carousel-inner"><div class="item active">{{{图1|}}}</div>{{#ifeq:{{{图2|}}}|||<div class="item">{{{图2|}}}</div>}}{{#ifeq:{{{图3|}}}|||<div class="item">{{{图3|}}}</div>}}{{#ifeq:{{{图4|}}}|||<div class="item">{{{图4|}}}</div>}}{{#ifeq:{{{图5|}}}|||<div class="item">{{{图5|}}}</div>}}{{#ifeq:{{{图6|}}}|||<div class="item">{{{图6|}}}</div>}}{{#ifeq:{{{图7|}}}|||<div class="item">{{{图7|}}}</div>}}{{#ifeq:{{{图8|}}}|||<div class="item">{{{图8|}}}</div>}}</div><ol class="carousel-indicators">{{#ifeq:{{{图2|}}}|||<li data-target=#qwikiCarousel{{#ifeq:{{{轮播编号|}}}||1|{{{轮播编号|}}}}} data-slide-to=0 class="active"></li>}}{{#ifeq:{{{图2|}}}|||<li data-target=#qwikiCarousel{{#ifeq:{{{轮播编号|}}}||1|{{{轮播编号|}}}}} data-slide-to=1></li>}}{{#ifeq:{{{图3|}}}|||<li data-target=#qwikiCarousel{{#ifeq:{{{轮播编号|}}}||1|{{{轮播编号|}}}}} data-slide-to=2></li>}}{{#ifeq:{{{图4|}}}|||<li data-target=#qwikiCarousel{{#ifeq:{{{轮播编号|}}}||1|{{{轮播编号|}}}}} data-slide-to=3></li>}}{{#ifeq:{{{图5|}}}|||<li data-target=#qwikiCarousel{{#ifeq:{{{轮播编号|}}}||1|{{{轮播编号|}}}}} data-slide-to=4></li>}}{{#ifeq:{{{图6|}}}|||<li data-target=#qwikiCarousel{{#ifeq:{{{轮播编号|}}}||1|{{{轮播编号|}}}}} data-slide-to=5></li>}}{{#ifeq:{{{图7|}}}|||<li data-target=#qwikiCarousel{{#ifeq:{{{轮播编号|}}}||1|{{{轮播编号|}}}}} data-slide-to=6></li>}}{{#ifeq:{{{图8|}}}|||<li data-target=#qwikiCarousel{{#ifeq:{{{轮播编号|}}}||1|{{{轮播编号|}}}}} data-slide-to=7></li>}}</ol><div><div class="jt_left hidden-xs">[[File:箭头_上一页.png|link=]]</div> <div class="jt_right hidden-xs">[[File:箭头_下一页.png|link=]]</div></div></div>
{{#css:
.active{
background-color: #FFFFFF !important;
}
.mw-parser-output ol {
margin: 0 !important;
}
.carousel-indicators {
position: absolute;
left: 50%;
bottom: 16px !important;
z-index: 15;
list-style: none;
display: flex;
transform: translateX(-50%);
justify-content: center;
}
.carousel.big-carousel .carousel-indicators li.active {
background-color: #FFFFFF !important;
}
.carousel.big-carousel .carousel-indicators li, .carousel.big-carousel .carousel-indicators li.active {
border-radius: 4px;
opacity: 0.7993149757385254;
border: 0 solid rgba(0.5920000076293945,0.5920000076293945,0.5920000076293945,1);
background: rgba(202,202,202,1);
width: 8px;
height: 8px;
margin-left: 8px;
}
.jt_right {
position: absolute;
margin-right: 16px;
width: 48px;
height: 48px;
right: 0px;
top: 40%;
opacity: 1;
background: rgba(0,0,0,0.6);
border-radius: 50%;
}
.jt_left {
position: absolute;
margin-left: 16px;
left: 0px;
width: 48px;
height: 48px;
top: 40%;
opacity: 1;
background: rgba(0,0,0,0.6);
border-radius: 50%;
}
.jt_left.hidden-xs img {
width: 16px;
height: 24px;
opacity: 1;
margin-top: 12px;
margin-left: 14px;
}
.jt_right.hidden-xs img {
width: 16px;
height: 24px;
opacity: 1;
margin-top: 12px;
margin-left: 16px;
}
@media only screen and (max-width:759px){
.jt_left a>img {
width: 100%;
}
.jt_right a>img {
width: 100%;
}
@media only screen and (max-width:550px){
.jt_left img {
width: 15px !important;
margin-top: -23%;
}
.jt_right img {
width: 15px !important;
margin-top: -23%;
}
}
@media only screen and (min-width:1700px){
.jt_left a>img {
margin-left: 10%;
margin-top: -15%;
}
.jt_right a>img {
margin-right: 10%;
margin-top: -15%;
}
}
<!--轮播图-->
.carousel-inner img {
border-radius: 1px;
}
}}
举报
