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

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

来自少前百科GFwiki
跳转至： 导航、 搜索
第1行： 第1行：
−
<includeonly><div class="jcarousel-wrapper">
+
<includeonly>{{#widget:style|style=/* 首页轮播样式 Start */
 +
 
 +
.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;
 +
}
 +
 
 +
/* 首页轮播样式 End */
 +
}}<div class="jcarousel-wrapper">
 
<div class="jcarousel">
 
<div class="jcarousel">
 
{{#if:{{{轮播图片1|}}}|*{{#if:{{{轮播说明1|}}}|<span class="blackout">{{{轮播说明1|}}}</span>|}}[[文件:{{{轮播图片1|}}}|link={{{轮播链接1|}}}|class=no-lazy]]|}}
 
{{#if:{{{轮播图片1|}}}|*{{#if:{{{轮播说明1|}}}|<span class="blackout">{{{轮播说明1|}}}</span>|}}[[文件:{{{轮播图片1|}}}|link={{{轮播链接1|}}}|class=no-lazy]]|}}

2019年8月21日 (三) 22:28的版本

取自“https://www.gfwiki.org/index.php?title=模板:首页轮播2&oldid=30323”