Swiper插件使用方法

Swiper插件的简单使用

Swiper插件是用来写轮播图的插件，十分简洁方便。可以直接去Swiper官网下载并点击开始使用Swiper按钮查看使用方法，这里只介绍简单引用的方法。
本文所写内容在官网均有详细介绍。

一、下载并引入文件

可以直接登录官网下载，如果安装了Nodejs环境也可以打开编译器终端利用npm i swiper下载
将文件放到你喜欢的路径，并分别引入css和js文件

代码语言：javascript复制

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</html>

二、html内容

代码语言：javascript复制

<div class="swiper-container">
    <div class="swiper-wrapper">
    <!-- 这里插入图片 轮播图1，2，3-->
        <div class="swiper-slide">
			 <img src="" alt="">
		</div>
         <div class="swiper-slide">
			 <img src="" alt="">
		</div>
		  <div class="swiper-slide">
			 <img src="" alt="">
		</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之外 -->

可以利用原有类名或者自己添加的class类名来将轮播图修改为自己喜欢的样式
例如修改轮播图大小

代码语言：javascript复制

.swiper-container {width: 600px;
   height: 300px;
}

三、JavaScript内容

代码语言：javascript复制

<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>

四、根据自己的需求设置轮播图

上图是插入图片后的Swiper轮播图，左右两侧为导航按钮，正下方圆点为分页器，右下角为滚动条。

1、设置轮播图自动切换

放在script标签中表示自动切换每隔1000ms切换一次

代码语言：javascript复制

  var mySwiper = new Swiper('.swiper-container', {
		    autoplay: {
          	delay: 1000
       		},
});

2、修改前进、后退按钮样式

swiper5新增可以通过设置Swiper的风格--swiper-theme-color或单独设置按钮风格--swiper-navigation-color来改变按钮颜色。
swiper5新增可以通过设置--swiper-navigation-size来调整按钮大小，默认是44px。

代码语言：javascript复制

   <!-- 分别为  前进  后退 按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

代码语言：javascript复制

	.swiper-button-prev{
		--swiper-theme-color:red;
		--swiper-navigation-size:20px;
	}

五、所有样式都可以随意按照需求调整，如果想要对Swiper插件有更多的了解，请登录Swiper官网查看API文档

javascript css api navigation size

0 人点赞