h5-Swiper触摸滑动插件

最新推荐文章于 2024-08-18 10:11:35 发布

阿宇大男神

最新推荐文章于 2024-08-18 10:11:35 发布

阅读量941

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/weixin_44738273/article/details/90242349

版权

本文介绍了如何使用Swiper触摸滑动插件创建H5轮播Banner。通过下载Swiper的JS文件，配置基本参数如direction、slidesPerView、autoplay、loop和pagination，可以实现自定义的轮播效果。此外，通过设置disableOnInteraction属性为false，可以在用户交互时保持自动轮播。

摘要由CSDN通过智能技术生成

项目要做轮播banner，用这个常用Swiper。
首先导入下js文件。
这里我没有用cdn的方式引入，直接下载放到本地了

<script src="/scripts/swiper.min.js"></script>

<body>
	<div class="swiper-container">
	  <div class="swiper-wrapper">
	    <div class="swiper-slide">
	    	<img src="https://img04.sogoucdn.com/app/a/100520024/9177c658ad52b8f4c60ddbc5395b7cc1">
	    </div>
	    <div class="swiper-slide">
	    	<img src="https://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/01/38/d8d426b6d61e3a834147c625253a6898.jpg">
	    </div>
	    <div class="swiper-slide">
			<img src="https://i01piccdn.sogoucdn.com/f77a4112d2e4e78f">
	    </div>
	  </div>
	</div>
</body>
<script type="text/javascript">
	window.onload = function(){
		var mySwiper = new