swiper插件简单使用

1 swiper介绍

开源、免费、强大的触摸滑动插件

简单配置即可实现手机、电脑网页大部分滑动功能,焦点图、tab、触摸导航等

比如常见轮播图就可以用这个实现

官网:https://www.swiper.com.cn/

swiper3地址:https://3.swiper.com.cn/

这里总结swiper3版本的简单使用方法

2 使用

2.1 下载swiper

https://3.swiper.com.cn/download/index.html

2.2 使用

  • 首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。
<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>
  • HTML内容。把 Slide 1到3 换成img标签即可实现轮播图
<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 class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
   <!-- <div class="swiper-scrollbar"></div>-->
</div>
导航等组件可以放在container之外
  • 初始化Swiper:最好是挨着标签(其实就是页面加载完成后加载)
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    //direction: 'vertical',默认是垂直方向
    loop: true,//循环滚动
    
    // 如果需要分页器
    pagination: '.swiper-pagination',
    
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 如果需要滚动条
    //scrollbar: '.swiper-scrollbar',
  })        
</script>

注意:如果不想使用某个功能,需要将对应的html和js的内容都删掉(注释掉),否则可能会报错.

比如:不想要滑动条这个功能需要将下面两段代码删掉,注意要同时删掉。

html

 <div class="swiper-scrollbar"></div>

js

 scrollbar: '.swiper-scrollbar',
posted @ 2020-12-31 11:34  青阳闲云  阅读(485)  评论(0编辑  收藏  举报