备案 网站名称什么用网站你应该明白我的意思吗
介绍
Swiper(swiper master)是一个第三方的库,可以用来实现移动端、pc端的滑动操作。,swiper应用广泛,使用频率仅次于jquery, 轮播图类排名第一,是网页设计师必备技能,众多耳熟能详的品牌在使用:阿里、腾讯、百度、拼多多、网易、华为、格力、喜茶、顺丰等,大量demo即下即用,前端新手亦可快捷做出精美效果。简单配置即可实现手机、电脑网页大部分滑动功能,焦点图、tab、触摸导航等。
使用介绍
1.导入文件
<link rel="stylesheet" href="./css/swiper-bundle.min.css"><script src="./js/swiper-bundle.min.js"></script>
2.html
<div class="swiper" style="width: 600px;height: 300px;"><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 class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><div class="swiper-scrollbar"></div></div>
3.js
<script>var mySwiper = new Swiper('.swiper', {direction: 'horizontal', // 垂直切换选项loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},})
</script>
4.案例演示
5.api文档
https://www.swiper.com.cn/api/start/new.html