◆少前百科是非盈利性、非官方的少女前线维基百科。
◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科
◆有任何意见、建议、纠错,欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群:597764980,微博@GFwiki少前百科
◆To foreigners,You can use twitter to contact us.
Icon Nyto Silver.png

“模板:首页轮播2”的版本间的差异

来自少前百科GFwiki
跳转至: 导航搜索
2个标签移动版编辑移动网页编辑
 
(未显示同一用户的15个中间版本)
第1行: 第1行:
<includeonly>{{#widget:style|style=
+
<includeonly><includeonly>{{#Widget:Slick/style}}<div class="main-carousel" >{{#if:{{{轮播图片1|}}}|<div>{{#if:{{{轮播说明1|}}}|<span class="blackout">{{{轮播说明1|}}}</span>|}}[[文件:{{{轮播图片1|}}}|link={{{轮播链接1|}}}|class=no-lazy]]</div>|}}{{#if:{{{轮播图片2|}}}|<div>{{#if:{{{轮播说明2|}}}|<span class="blackout">{{{轮播说明2|}}}</span>|}}[[文件:{{{轮播图片2|}}}|link={{{轮播链接2|}}}|class=no-lazy]]</div>|}}{{#if:{{{轮播图片3|}}}|<div>{{#if:{{{轮播说明3|}}}|<span class="blackout">{{{轮播说明3|}}}</span>|}}[[文件:{{{轮播图片3|}}}|link={{{轮播链接3|}}}|class=no-lazy]]</div>|}}{{#if:{{{轮播图片4|}}}|<div>{{#if:{{{轮播说明4|}}}|<span class="blackout">{{{轮播说明4|}}}</span>|}}[[文件:{{{轮播图片4|}}}|link={{{轮播链接4|}}}|class=no-lazy]]</div>|}}{{#if:{{{轮播图片5|}}}|<div>{{#if:{{{轮播说明5|}}}|<span class="blackout">{{{轮播说明5|}}}</span>|}}[[文件:{{{轮播图片5|}}}|link={{{轮播链接5|}}}|class=no-lazy]]</div>|}}{{#if:{{{轮播图片6|}}}|<div>{{#if:{{{轮播说明6|}}}|<span class="blackout">{{{轮播说明6|}}}</span>|}}[[文件:{{{轮播图片6|}}}|link={{{轮播链接6|}}}|class=no-lazy]]</div>|}}{{#if:{{{轮播图片7|}}}|<div>{{#if:{{{轮播说明7|}}}|<span class="blackout">{{{轮播说明7|}}}</span>|}}[[文件:{{{轮播图片7|}}}|link={{{轮播链接7|}}}|class=no-lazy]]</div>|}}{{#if:{{{轮播图片8|}}}|<div>{{#if:{{{轮播说明8|}}}|<span class="blackout">{{{轮播说明8|}}}</span>|}}[[文件:{{{轮播图片8|}}}|link={{{轮播链接8|}}}|class=no-lazy]]</div>|}}{{#if:{{{轮播图片9|}}}|<div>{{#if:{{{轮播说明9|}}}|<span class="blackout">{{{轮播说明9|}}}</span>|}}[[文件:{{{轮播图片9|}}}|link={{{轮播链接9|}}}|class=no-lazy]]</div>|}}</div>{{#Widget:Slick}}</includeonly>
.jcarousel ul ~p{
 
    display
 
}
 
.jcarousel-wrapper {
 
    position: relative;
 
    margin:25px auto;
 
    border:1px solid white;
 
    margin-bottom:40px;
 
    max-width:720px;
 
    max-height:450px;
 
}
 
.jcarousel-wrapper::before {
 
    content:"";
 
    display:block;
 
    position:absolute;
 
    background-image: url(/images/vectorize_border/mainpage_border.svg);
 
    background-repeat:no-repeat;
 
    background-size:100%;
 
    width: 175px;
 
    height: 121px;
 
    z-index: 1;
 
    left: -21px;
 
    top: -21px;
 
}
 
.jcarousel-wrapper::after {
 
    content:"";
 
    display:block;
 
    position:absolute;
 
    background-image: url(/images/vectorize_border/mainpage_border.svg);
 
    background-repeat:no-repeat;
 
    background-size:100%;
 
    width: 175px;
 
    height: 121px;
 
    z-index: 1;
 
    right: -21px;
 
    bottom: -21px;
 
    transform:rotate(180deg)
 
}
 
 
 
/** Carousel **/
 
 
 
.jcarousel {
 
    position: relative;
 
    overflow: hidden;
 
    background: rgba(51, 51, 51, 0.2);
 
}
 
 
 
.jcarousel ul {
 
    width: 20000em;
 
    position: relative;
 
    list-style: none;
 
    margin: 0;
 
    padding: 0;
 
}
 
 
 
.jcarousel li {
 
    /* float: left; */
 
    position: relative;
 
    margin: 0 !important;
 
    display: inline-block;
 
    overflow: hidden;
 
    vertical-align: middle;
 
}
 
 
 
.jcarousel img {
 
    display: block;
 
    max-width: 100%;
 
    height: auto !important;
 
    margin: 0 auto;
 
}
 
 
 
/** Carousel Controls **/
 
 
 
.jcarousel-control-prev,
 
.jcarousel-control-next {
 
    position: absolute;
 
    top: 50%;
 
    transform: translateY(-50%);
 
    width: 40px;
 
    height: 70px;
 
    text-align: center;
 
    opacity: 0.7;
 
    transition: all 0.1s ease-in;
 
}
 
 
 
.jcarousel-control-prev:hover,
 
.jcarousel-control-next:hover {
 
    opacity: 1;
 
    filter: brightness(1) sepia(1) saturate(5000%) hue-rotate(-30deg);
 
}
 
 
 
.jcarousel-control-prev {
 
    left: 15px;
 
    background-image: url(/images/vectorize_icon/left_arrow.svg);
 
    background-position: right top;
 
    background-size: 40px 70px;
 
}
 
 
 
.jcarousel-control-next {
 
    right: 15px;
 
    background-image: url(/images/vectorize_icon/right_arrow.svg);
 
    background-position: right top;
 
    background-size: 40px 70px;
 
}
 
 
 
.jcarousel-control-prev:hover span,
 
.jcarousel-control-next:hover span {
 
    display: block;
 
}
 
 
 
.jcarousel-control-prev.inactive,
 
.jcarousel-control-next.inactive {
 
    opacity: .25;
 
    cursor: default;
 
    filter:none;
 
}
 
 
 
/** Carousel Pagination **/
 
 
 
.jcarousel-pagination {
 
    position: absolute;
 
    bottom: -33px;
 
    right: 0;
 
    margin: 0 !important;
 
}
 
 
 
.jcarousel-pagination a {
 
    text-decoration: none;
 
    display: inline-block;
 
    font-size: 11px;
 
    height: 10px;
 
    width: 10px;
 
    line-height: 10px;
 
    border: 1px white solid;
 
    background: #4E443C;
 
    color: #4E443C;
 
    text-indent: -9999px;
 
    transform: rotate(45deg);
 
    margin-left: 10px;
 
    -webkit-box-shadow: 0 0 2px #4E443C;
 
    -moz-box-shadow: 0 0 2px #4E443C;
 
    box-shadow: 0 0 2px #4E443C;
 
}
 
 
 
.jcarousel-pagination a.active {
 
    background: #f4c430;
 
    color: #fff;
 
    opacity: 1;
 
    -webkit-box-shadow: 0 0 2px #F0EFE7;
 
    -moz-box-shadow: 0 0 2px #F0EFE7;
 
    box-shadow: 0 0 2px #F0EFE7;
 
}
 
 
 
.jcarousel .blackout{
 
    height: auto;
 
    width: calc(100% - 20px);
 
    position: absolute;
 
    display: block;
 
    background-image: linear-gradient(90deg, black, transparent);
 
    bottom: 0;
 
    padding: 5px 10px;
 
}
 
}}<div class="jcarousel-wrapper">
 
<div class="jcarousel">
 
{{#if:{{{轮播图片1|}}}|*{{#if:{{{轮播说明1|}}}|<span class="blackout">{{{轮播说明1|}}}</span>|}}[[文件:{{{轮播图片1|}}}|link={{{轮播链接1|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片2|}}}|
 
*{{#if:{{{轮播说明2|}}}|<span class="blackout">{{{轮播说明2|}}}</span>|}}[[文件:{{{轮播图片2|}}}|link={{{轮播链接2|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片3|}}}|
 
*{{#if:{{{轮播说明3|}}}|<span class="blackout">{{{轮播说明3|}}}</span>|}}[[文件:{{{轮播图片3|}}}|link={{{轮播链接3|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片4|}}}|
 
*{{#if:{{{轮播说明4|}}}|<span class="blackout">{{{轮播说明4|}}}</span>|}}[[文件:{{{轮播图片4|}}}|link={{{轮播链接4|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片5|}}}|
 
*{{#if:{{{轮播说明5|}}}|<span class="blackout">{{{轮播说明5|}}}</span>|}}[[文件:{{{轮播图片5|}}}|link={{{轮播链接5|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片6|}}}|
 
*{{#if:{{{轮播说明6|}}}|<span class="blackout">{{{轮播说明6|}}}</span>|}}[[文件:{{{轮播图片6|}}}|link={{{轮播链接6|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片7|}}}|
 
*{{#if:{{{轮播说明7|}}}|<span class="blackout">{{{轮播说明7|}}}</span>|}}[[文件:{{{轮播图片7|}}}|link={{{轮播链接7|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片8|}}}|
 
*{{#if:{{{轮播说明8|}}}|<span class="blackout">{{{轮播说明8|}}}</span>|}}[[文件:{{{轮播图片8|}}}|link={{{轮播链接8|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片9|}}}|
 
*{{#if:{{{轮播说明9|}}}|<span class="blackout">{{{轮播说明9|}}}</span>|}}[[文件:{{{轮播图片9|}}}|link={{{轮播链接9|}}}|class=no-lazy]]|}}</div><span href="#" class="jcarousel-control-prev"></span><span href="#" class="jcarousel-control-next"></span><p class="jcarousel-pagination"></p>
 
</div>
 
{{#widget:sandbox6}}</includeonly>
 

2019年8月22日 (四) 22:52的最新版本