swiper使用

介绍

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