<!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>
