swiper插件的官网：https://www.swiper.com.cn/
在这个插件网站上，你可以看到“中文教程”里有“swiper5使用方法”按照这种方式使用即可。
使用的第一步还是要引入插件，同样是有在线引入和下载下来使用2种方式。这两种方式可以在“获取swiper”中找到。
第一种方式还是在线引入，主要是下面几种方式：
swiper的在线引入方式
第二种方式是下载下来引用，如果自己下载的是4.x.x版本的话，需要引入的css和js文件在dist文件夹下，但是如果是5.x.x版本的话，需要引入的css和js文件在package文件夹下，所有下载的是版本4还是5，引入方式是不一样的，这一点要注意哦~
swiper4.x.x版本文件下来下来，里面有个dist文件夹
dist文件夹下有css和js文件
css文件夹下有swiper.css和swiper.min.css两个文件，将swiper.min.css引入即可
js文件夹下有swiper.js和swiper.min.js，将swiper.min.js引入即可。
即可以按照下面来引用：(注意引入路径要正确）
<link rel="stylesheet" href="../swiper-4.5.3/dist/css/swiper.min.css">
<link rel="stylesheet" href="../swiper-4.5.3/dist/js/swiper.min.js">
如下图，swiper5的版本，css和js是在package文件夹下的：
swiper5版本的css和js在package文件夹下
package文件夹下有css和js文件
所以swiper5以上版本引入路径是：
<link rel="stylesheet" href="../swiper-5.2.0/package/css/swiper.min.css">
<script src="../swiper-5.2.0/package/js/swiper.min.js"></script>
使用第二步：在html中加入swiper-container内容：分页器swiper-pagination指的就是小圆点，如果不需要可以删掉，导航按钮指的是swiper-button-pre就是向左向右按钮，不需要也可以删掉，swiper-scrollbar是长条形的滚动条
添加html内容
第三步：可以给swiper设置大小：
第四步：初始化swiper，direction：‘vertical’是垂直方向滑动，如果是水平方向轮播的话，就不需要这一项了，要删掉。
这里初始化的时候，是var mySwiper = new Swiper（'.swiper-container',{}......)
如果自己的html里<div class="swiper-container" id="one-container">的话，在new的时候，也可以将初始化变成var mySwiper = new Swiper（'#swiper-container',{}......)，但是千万不能将<div class="swiper-container" id="one-container">换成<div id="one-container">，即可以在class类中加类名、id名，但是不能删除，不然在代码里封装的.swiper-container格式就发生了变化。
如果自己一个html中有好几个轮播的话，可以就要初始化两次。两次初始化内容可以不同，如给第一个轮播水平轮播，给第二个轮播垂直轮播。如html中：
<div class="swiper-container" id='one'>
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-wrapper" id='two'>
<div class="swiper-slide">Slide 1</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
这时初始化就是
var mySwiper = new Swiper ('#one', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
}
})
var mySwiper = new Swiper ('#two', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
整体下来的代码就是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../swiper-5.2.0/package/css/swiper.min.css">
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<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>
<script src="../swiper-5.2.0/package/js/swiper.min.js"></script>
<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>
</body>
</html>
网友评论