<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>年会网</title>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<style type="text/css">
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
</body>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', //2.Slides的滑动方向,可设置水平(horizontal)或垂直(vertical);
initialSlide: 0, //3.初始化显示的swiper-slide,从下标为0的swiper-slide开始,默认为0;
speed: 300, //4.切换速度,即slider自动滑动开始到结束的时间(单位ms),也是触摸滑动时释放至贴合的时间,默认300。
width: 500,
height: 500, //5.制Swiper的高/宽度(px),当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上。这个参数会使自适应失效。
autoHeight: true, //6.自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。
preloadImages: true, //7.默认为true,Swiper会强制加载所有图片。
preventClicksPropagation: false,//阻止click冒泡。拖动Swiper时阻止click事件。
autoplay: { //8.自动播放
delay: 3000, //8.1自动播放间隔时间
stopOnLastSlide: false, //8.2切换到最后一个是否停止,但是在loop:true下无效果;
disableOnInteraction: true, //8.3用户触碰,悬停,拖放是否自动播放停止,默认为true;
reverseDirection: false, //8.4 是否开启反向轮播,默认为false
},
//显示小圆点
pagination: {
el: '.swiper-pagination',
clickable: true, //点击小圆点切换
// 不加以下两行无法手动滑动
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
},
})
</script>
</html>
HTML页面swiper轮播使用
最新推荐文章于 2024-04-10 18:02:16 发布