<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://www.swiper.com.cn/dist/css/swiper.min.css">
<style>
.swiper-wrapper{
border:1px red solid;
width:1200px;
height:500px;
}
.he{
width:100%;
height:100%;
}
.a{
padding:10px 40%;
}
</style>
</head>
<body>
<div id="banner" style="margin-top:0px; "><!--轮播-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class='he' src="http://www.swiper.com.cn/demo/img/nature4.jpg" alt="">
</div>
<div class="swiper-slide">
<img class='he' src="http://www.swiper.com.cn/demo/img/nature2.jpg" alt="">
</div>
<div class="swiper-slide">
<img class='he' src="http://www.swiper.com.cn/demo/img/nature3.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮（左右箭头） -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!--<div style="border: 1px solid red;">-->
</div>
</div>
<script src="http://www.swiper.com.cn/dist/js/swiper.min.js" ></script>
<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
//点击圆点切换
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
direction: 'horizontal',
resizeReInit: true,
lazyLoading: true,
preloadImages: false,
updateOnImagesReady: true,
paginationClickable: true,
spaceBetween: 0,
slidesPerColumn: 1,
speed: 600,
loop: true,
initialSlide: 0,
visibilityFullFit: true
})
</script>
<div class='a'><a href="http://www.swiper.com.cn">swiper官网http://www.swiper.com.cn</a></div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
