您的位置：首页 > 其它

swiper滑动之3D 初始滑块索引为第二个

2017-12-08 15:14 1351 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<link href="../css/amazeui.swiper.min.css" rel="stylesheet">
<style>
.doc-example{
margin-top: .21rem;
}
</style>
</head>
<body>
<div class="doc-example ">
<div class="swiper-container swiper-container-horizontal swiper-container-3d swiper-container-coverflow" id='mySwiper' style="cursor: -webkit-grab;">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(1px, 0px, 0px);">
<!-- 第一张图 -->
<div class="swiper-slide swiper-slide-active" style="background-image: url(../img/silver_card.png);background-size: 2.25rem  1.5rem;height: 1.5rem;width: 2.25rem;background-repeat: no-repeat;transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg); z-index: 1; transition-duration: 0ms;">
<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;">
</div>
<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;">
</div>
</div>
<!-- 第二张图 -->
<div class="swiper-slide swiper-slide-next" style="background-image: url(../img/gold_card.png);background-size: 2.25rem  1.5rem;height: 1.5rem;width: 2.25rem;background-repeat: no-repeat;transform: translate3d(0px, 0px, -100px) rotateX(0deg) rotateY(-50deg); z-index: 0; transition-duration: 0ms;">
<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;">
</div>
<div class="swiper-slide-shadow-right" style="opacity: 1; transition-duration: 0ms;">
</div>
</div>
<!-- 第三张图 -->
<div class="swiper-slide" style="background-image: url(../img/diamond_card.png);background-size: 2.25rem  1.5rem;height: 1.5rem;width: 2.25rem;background-repeat: no-repeat;transform: translate3d(0px, 0px, -200px) rotateX(0deg) rotateY(-100deg); z-index: -1; transition-duration: 0ms;">
<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;">
</div>
<div class="swiper-slide-shadow-right" style="opacity: 2; transition-duration: 0ms;">
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination">
<span class="swiper-pagination-bullet swiper-pagination-bullet-active">
</span>
<span class="swiper-pagination-bullet">
</span>
<span class="swiper-pagination-bullet">
</span>
<span class="swiper-pagination-bullet">
</span>

</div>
</div>
</div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/amazeui.swiper.min.js"></script>
<script>
$('#mySwiper').swiper({
pagination: '#mySwiper .swiper-pagination',
effect: 'coverflow',
grabCursor: true,
initialSlide:1,//用来设定页面加载完成时，第几张图片先显示出来
centeredSlides: true,
slidesPerView: 'auto',
coverflow: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
//            loop : true,
//            slidesPerView : 'auto',
//            loopedSlides :8
}
});
</script>
</html>

最终3D滑动效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 索引 3d swipe 滑动

相关文章推荐

新的分享

章节导航