swiper插件的官網(wǎng)：https://www.swiper.com.cn/
在這個插件網(wǎng)站上，你可以看到“中文教程”里有“swiper5使用方法”按照這種方式使用即可。
使用的第一步還是要引入插件，同樣是有在線引入和下載下來使用2種方式。這兩種方式可以在“獲取swiper”中找到。
第一種方式還是在線引入，主要是下面幾種方式：
第二種方式是下載下來引用，如果自己下載的是4.x.x版本的話，需要引入的css和js文件在dist文件夾下，但是如果是5.x.x版本的話，需要引入的css和js文件在package文件夾下，所有下載的是版本4還是5，引入方式是不一樣的，這一點要注意哦~
即可以按照下面來引用：(注意引入路徑要正確）
<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以上版本引入路徑是：
<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內(nèi)容：分頁器swiper-pagination指的就是小圓點，如果不需要可以刪掉，導(dǎo)航按鈕指的是swiper-button-pre就是向左向右按鈕，不需要也可以刪掉，swiper-scrollbar是長條形的滾動條
第三步：可以給swiper設(shè)置大?。?/b>
第四步：初始化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格式就發(fā)生了變化。
如果自己一個html中有好幾個輪播的話，可以就要初始化兩次。兩次初始化內(nèi)容可以不同，如給第一個輪播水平輪播，給第二個輪播垂直輪播。如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, // 循環(huán)模式選項
? ? ? ? ? // 如果需要分頁器
? ? ? ? ? pagination: {
? ? ? ? ? ? el: '.swiper-pagination',
? ? ? ? ? }
? ? ? ? })? ? ? ?
var mySwiper = new Swiper ('#two', {
? ? ? ? ? direction: 'vertical', // 垂直切換選項
? ? ? ? ? loop: true, // 循環(huán)模式選項
? ? ? ? ? // 如果需要分頁器
? ? ? ? ? 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>
? ? ? ? <!-- 如果需要導(dǎo)航按鈕 -->
? ? ? ? <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, // 循環(huán)模式選項
? ? ? ? ? // 如果需要分頁器
? ? ? ? ? pagination: {
? ? ? ? ? ? el: '.swiper-pagination',
? ? ? ? ? },
? ? ? ? ? // 如果需要前進后退按鈕
? ? ? ? ? navigation: {
? ? ? ? ? ? nextEl: '.swiper-button-next',
? ? ? ? ? ? prevEl: '.swiper-button-prev',
? ? ? ? ? },
? ? ? ? ? // 如果需要滾動條
? ? ? ? ? scrollbar: {
? ? ? ? ? ? el: '.swiper-scrollbar',
? ? ? ? ? },
? ? ? ? })? ? ? ?
? ? </script>
</body>
</html>
