<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="./js/swiper.min.js"></script>
<script src='./js/index.js'></script>
<style media="screen">
.swiper-container{
width:100%;
height:50%;
}
.he{
width:100%;
height:100%;
}
</style>
<link rel="stylesheet" href="./css/swiper.min.css">
</head>
<body>
<!-- 轮播图开始 -->
<div ></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class='he' src="./images/1.jpg" alt="">
</div>
<div class="swiper-slide">
<img class='he' src="./images/2.jpg" alt=""> </div>
<div class="swiper-slide">
<img class='he' src="./images/3.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
//点击圆点切换
paginationClickable: true,
// 图片之间的距离
spaceBetween: 30,
// 默认状态下活动块居左，设定为true时，活动块会居中。
centeredSlides: true,
// 自动轮播时间
autoplay: 6000,
// 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
autoplayDisableOnInteraction: false,
// 3D切换效果
effect: 'fade',
//左右滑动
// direction: 'horizontal',
// 设置为true则windows改变尺寸时swiper会重新初始化。
resizeReInit: true,
lazyLoading: true,
preloadImages: false,
// 当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。
updateOnImagesReady: true,
paginationClickable: true,
// 图片之间的距离
spaceBetween: 0,
//slidesPerColumn参数
slidesPerColumn: 1,
//滑动速度，即slider自动滑动开始到结束的时间（单位ms）
speed: 600,
loop: true,
initialSlide: 0,
// 如果启用，仅有“可视”的slides会最后适应容器的大小
visibilityFullFit: true ,
});
</script>
<!-- 轮播图结束 -->
<div id='four'>
<a href="#">
<img src="./images/" alt="">
</a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</body>
</html>
swiper轮播图代码实例
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 作为一个iOS开发者,我们经常需要用到轮播图,比如:我们首页顶部的广告轮播,商品详情页面的商品图片轮播等,如果我们...
