moblie下swiper 滑动效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Swiper Appstore</title>
<style>
div {
margin: 0;
padding: 0;
}
.swiper-slide {
float: left;
width: 200px;
height: 200px;
background-color: #39F;
}
</style>
</head>
<body>
<div class="banners-container" style="width:600px; height:200px; overflow:hidden; margin-left:20%">
<div class="swiper-wrapper">
<div class="swiper-slide"> 1 </div>
<div class="swiper-slide"> 2 </div>
<div class="swiper-slide"> 3 </div>
<div class="swiper-slide">4</div>
<div class="swiper-slide">5</div>
<div class="swiper-slide">6</div>
<div class="swiper-slide">7</div>
<div class="swiper-slide">8</div>
<div class="swiper-slide">9</div>
</div>
</div>
<script type="text/javascript" src="jQuery.1.9.1.js"></script>
<script type="text/javascript" src="idangerous.swiper-2.0.min.js"></script>
<!--<script type="text/javascript" src="idangerous.swiper.3dflow-2.0.js"></script>-->
<script>
$(function(){
$('.banners-container').each(function(){$(this).swiper({slidesPerView:'auto',offsetPxBefore:0,offsetPxAfter:0})})
})
</script>
</body>
</html>
浙公网安备 33010602011771号