swiper插件简单使用

时间 2021-01-02

标签 css html app ide oop 插件 code htm get 栏目 CSS 繁體版

原文原文链接

1 swiper介绍

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

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

好比常见轮播图就能够用这个实现app

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

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

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

2 使用

2.1 下载swiper

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

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的内容都删掉(注释掉),不然可能会报错.htm

好比：不想要滑动条这个功能须要将下面两段代码删掉,注意要同时删掉。ip

htmlget

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

scrollbar: '.swiper-scrollbar',