swiper图片翻转样式

来源：互联网发布：红蜻蜓软件编辑：程序博客网时间：2024/04/28 08:41

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>swiper</title>
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
<style type="text/css">
html,body{
width: 100%;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide img{
width: 100%;
height: 100%;
}
</style>

</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/08.jpg"></div>
<div class="swiper-slide"><img src="img/09.jpg"></div>
<div class="swiper-slide"><img src="img/07.jpg"></div>
</div>




<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>



<div class="swiper-scrollbar"></div>
</div>

</body>
<script type="text/javascript" src="js/swiper-3.4.2.min.js">

</script>

<script type="text/javascript">

var mySwiper = new Swiper ('.swiper-container', {
//渐隐渐现
// effect : 'fade',
// fade: {
// crossFade: false,
// },
//立方体效果
effect : 'cube',
cube: {
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6
},
//折页效果
// effect : 'coverflow',
// slidesPerView: 3,
// centeredSlides: true,
// coverflow: {
// rotate: 30,
// stretch: 10,
// depth: 60,
// modifier: 2,
// slideShadows : true
// },
//翻转效果
// effect : 'flip',
// flip: {
// slideShadows : true,
// limitRotation : true,
// },
//添加触屏滑动
touchRatio : 0.5,
direction: 'horizontal',//'vertical',
loop: true,
autoplay:1000,//间隔时间
speed:2000,
// 如果需要分页器
// pagination: '.swiper-pagination',

// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
}) ;


</script>
</html>

阅读全文

0 0