Swiper配置

首先附上 Swiper 的中文网

前言

swiper是网页设计师必备的一项技能，它的使用频率仅次于jquery，国内大型企业包括 bat 都在使用。并且掌握好swiper也会让你在职场中游刃有余。
swiper的学习特别简单，通过你简单的配置即可实现手机，电脑网页大部分滑动功能，焦点图，tab，触摸导航等。
开始之前，你可以先去体验一下swiper的强大魅力，包括：基础演示，移动端应用，PC端应用，相信在你体验了swiper后绝对会被它吸引到吧，接下来就让我们走进swiper的学习。

`Swiper5`使用方法

首先需要引入swiper.min.js和swiper.min.css文件，分别是swiper的javascript和css的压缩文件。这里介绍下面三种方式，推荐使用第三种：
1.可以使用直接引入CDN，当然这种方式仅限于你只想使用一次或者体验一下swiper，你可以复制以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>swiper搭建</title>
    <!-- 使用Swiper5 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

    <!-- 使用Swiper4/Swiper3，使用时要将4.x.x改成相应的版本，如4.0.2(或3.x.x版本) -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script> -->
</head>
<body>
    
</body>
</html>

2.点击下载，即可下载到Swiper5.3.1.zip，这是swiper5完整包，包含Swiper5的全部基础演示和未压缩的js、css文件，这两个文件分别在解压后的文件夹根目录下的package文件夹中。只需要在项目中按路径引入即可。
3.通过npm下载，这是我们提倡的方式，直接在你要下载的目录下运行终端输入npm install swiper命令即可下载。（关于npm的使用大家可以去搜索相关资料学习，这里就不复述了。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>swiper搭建</title>
    <!-- 引入swiper.min.css文件 -->
    <link rel="stylesheet" href="swiper-5.3.1/package/css/swiper.min.css">
</head>
<body>
    
    <!-- 引入swiper.min.js文件 -->
    <script src="swiper-5.3.1/package/js/swiper.min.js"></script>
</body>
</html>

接下来是HTML内容

<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定义一个大小时，你可以这么做：
```
.swiper-container {
    width: 600px;
    height: 300px;
}  
```

接下来初始化Swiper，以下代码最好紧挨着</body>，记住是整个body的最后面。

<script>        
 	var mySwiper = new Swiper ('.swiper-container', {
		direction: 'vertical', // 垂直切换选项
   		loop: true, // 循环模式选项

	    // 如果需要分页器
	    pagination: {
	      el: '.swiper-pagination',
	    },

	    // 如果需要前进后退按钮
	    navigation: {
	      nextEl: '.swiper-button-next',
	      prevEl: '.swiper-button-prev',
	    },
    
	    // 如果需要滚动条
	    scrollbar: {
	      el: '.swiper-scrollbar',
	    },
	})        
</script>

当然如果你也可以使用window.onload函数在页面加载完成后初始化Swiper，这样就没有必要紧挨着</body>。

那么现在属于你的Swiper就已经能正常切换了。你可以根据需求对上面的代码进行修改。
还有一点，如果作为CommonJs或ES模块引入：

//CommonJs
var Swiper = require('swiper');    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

//ES
import Swiper from 'swiper';    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

关于`Swiper`的配置选项，可以参考`swiper`的API文档。

october_autumn

发布了16 篇原创文章 · 获赞 1 · 访问量 180

私信关注

首先附上 Swiper 的中文网

前言

Swiper5使用方法

关于Swiper的配置选项，可以参考swiper的API文档。

猜你喜欢

`Swiper5`使用方法

关于`Swiper`的配置选项，可以参考`swiper`的API文档。