There are 2d and 3d slide in the project Style files are written in less. So you might need to compile it. In addition, the project supports custom parameters. $.fn.slideCarsousel.defaultSetting = {
slideInterval :'slideInterval', // interval of slide
isAutoChange :true, // true or false
direction : 5000, // time interval between
callbackFunc:null, // if it is not empty, it will execute
indicatorEvent:'click', // indicator event,supports click or mouseover
slideType:'2d' // 2d or 3d
}
<script src="../js/slide-min.js"></script>
<script>
$(function(){
//3d
$('#slide3d').slideCarsousel({slideType:'3d',indicatorEvent:'mouseover'});
//2d
var sliderDescArr=[],i=0,len=10;
for(;i<len;i++){
sliderDescArr.push(new Array(10).join(''+i));
}
$('#sliderDesc').text(sliderDescArr[0]);
$('#slide2d').slideCarsousel({callbackFunc:function(index){
$('#sliderDesc1').text(sliderDescArr[index]);
}});
});
</script>
html container set class slide-3d or slide-2d <div id="slide2d" class="slide-carousel slide-2d">
<ul class="item-list clearfix">
<li class="item0">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="../image/banner1.jpg" alt="">
</a>
</div>
</li>
<li class="item1">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="../image/banner2.jpg" alt="">
</a>
</div>
</li>
<li class="item2">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="../image/banner3.jpg" alt="">
</a>
</div>
</li>
<li class="item3">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="../image/banner4.jpg" alt="">
</a>
</div>
</li>
<li class="item4">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="../image/banner5.jpg" alt="">
</a>
</div>
</li>
<li class="item5">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="../image/banner6.jpg" alt="">
</a>
</div>
</li>
<li class="item6">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="../image/banner7.jpg" alt="">
</a>
</div>
</li>
<li class="item7">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="../image/banner8.jpg" alt="">
</a>
</div>
</li>
<li class="item8">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="../image/banner9.jpg" alt="">
</a>
</div>
</li>
<li class="item9">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="../image/banner10.jpg" alt="">
</a>
</div>
</li>
</ul>
<!--indicators-->
<div class="indicator-list">
<a href="javascript:void(0);" data-slide-index="0" class="selected"></a>
<a href="javascript:void(0);" data-slide-index="1"></a>
<a href="javascript:void(0);" data-slide-index="2"></a>
<a href="javascript:void(0);" data-slide-index="3"></a>
<a href="javascript:void(0);" data-slide-index="4"></a>
<a href="javascript:void(0);" data-slide-index="5"></a>
<a href="javascript:void(0);" data-slide-index="6"></a>
<a href="javascript:void(0);" data-slide-index="7"></a>
<a href="javascript:void(0);" data-slide-index="8"></a>
<a href="javascript:void(0);" data-slide-index="9"></a>
</div>
<!--controls-->
<div class="controls">
<a class="item-prev glyphicon glyphicon-menu-left" href="javascript:void(0);"></a>
<a class="item-next glyphicon glyphicon-menu-right" href="javascript:void(0);"></a>
</div>
<!--desc-->
<div class="desc">
<a href=""><strong id="sliderDesc1"></strong></a>
</div>
</div>
.slide-carousel{width: 100%;height: 100%;position: relative;overflow: hidden;
.item-list{position:relative;height: 100%;width:100%;overflow: hidden;
li{
.item-content{width:100%;height: 100%;
a{display: block;width:100%;height: 100%;
.cover-img{width:100%;height: 100%;}
}
}
}
}
.indicator-list{position: absolute;bottom:20px;left:50%;margin-left: -63px;z-index: 100;
a{display: inline-block;width: 12px;height: 12px;border: 2px solid #fff;border-radius:50%;overflow: hidden;background-color: #ccc;margin-left: 5px;
&.selected{border-color: #ff6700;background-color: #5fff92;}
}
}
.controls{opacity: 0;
a{cursor: pointer;text-decoration: none;width:40px;height: 60px;position: absolute;background-color:rgba(0,0,0,0.2);color:#fff;font-size: 35px;padding-top: 25px;z-index: 2;
&:hover{background-color:rgba(0,0,0,0.5);}
}
.item-prev{top:50%;left: 0;margin-top: -42px;}
.item-next{top:50%;right: 0;margin-top: -42px;}
}
.desc{height: 72px;width:100%;position: absolute;bottom: 0;left: 0;background-color:rgba(0,0,0,0.6);z-index: 99;
strong{color:#fff;font-size: 20px;line-height: 72px;margin-left: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
}
&:hover .controls{opacity: 1;transition: opacity 0.5s ease;}
}
slide 2d or 3d custom style @itemX-2d:1200px;
@itemX-3d:225px;
.itemDefault-3d(@translateX:@itemX-3d,@scale:0.8){
transform: translate3d(@translateX, 0, 0) scale(@scale);
}
.itemDefault-2d(@translateX:@itemX-2d){
transform: translateX(@translateX);
}
header .banner{width:1200px;height: 300px;margin: 100px auto 0;
.slide-carousel{margin-bottom: 20px;}
.slide-3d{
.desc{display: none;}
.item-list li{width:750px;height: 300px;transition: all 0.5s ease-out;opacity: 0;position: absolute;top:0;left: 0;
&.item0{.itemDefault-3d(@itemX-3d*-1);}
&.item1{ transform: translate3d(0, 0, 0) scale(0.8);transform-origin: 0 50%;opacity: 1;z-index: 2;}
&.item2{ transform: translate3d(@itemX-3d, 0, 0) scale(1);transform-origin: 0 50%;opacity: 1;z-index: 3;}
&.item3{ transform: translate3d(@itemX-3d*2, 0, 0) scale(0.8);transform-origin: 100% 50%;opacity: 1;z-index: 2;}
&.item4{.itemDefault-3d(@itemX-3d*3);}
&.item5{.itemDefault-3d(@itemX-3d*4);}
&.item6{.itemDefault-3d(@itemX-3d*5);}
&.item7{.itemDefault-3d(@itemX-3d*6);}
&.item8{.itemDefault-3d(@itemX-3d*7);}
&.item9{.itemDefault-3d(@itemX-3d*8);}
}
}
.slide-2d .item-list li{width:1200px;height: 300px;transition: all 0.5s ease-out;position: absolute;top:0;left: 0;
&.item0{.itemDefault-2d(@itemX-2d*-1);}
&.item1{.itemDefault-2d(@itemX-2d*0);}
&.item2{ .itemDefault-2d(@itemX-2d);}
&.item3{.itemDefault-2d(@itemX-2d*2);}
&.item4{.itemDefault-2d(@itemX-2d*3);}
&.item5{.itemDefault-2d(@itemX-2d*4);}
&.item6{.itemDefault-2d(@itemX-2d*5);}
&.item7{.itemDefault-2d(@itemX-2d*6);}
&.item8{.itemDefault-2d(@itemX-2d*7);}
&.item9{.itemDefault-2d(@itemX-2d*8);}
}
}