来自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;
}
}}
举报