Swiper插件的简单使用

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

一、下载并引入文件

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

<!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内容

<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类名来将轮播图修改为自己喜欢的样式
例如修改轮播图大小

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

三、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切换一次

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

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

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

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

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

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

Swiper插件的简单使用相关推荐

Swiper插件使用方法
Swiper插件的简单使用 Swiper插件是用来写轮播图的插件,十分简洁方便.可以直接去Swiper官网下载并点击开始使用Swiper按钮查看使用方法,这里只介绍简单引用的方法. 本文所写内容在官网 ...
swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用话不多说,直接上教程 1.首先加载插件,需要用到 ...
【react开发】使用swiper插件，loop:true时产生的问题解决方案
这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转.出现了一个问题: 就是向右滑动到该帧时的swiper,点击 ...
Swiper插件的基本使用方法和案例
Swiper插件的基本使用方法和案例一.Swiper是什么? Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Sw ...
PC端和移动端网页特效，fastclick插件，Swiper插件，Bootstrap等框架，本地存储
目录 PC 端网页特效元素偏移量 offset 系列 1.offset 系列常用属性 2.offset 与 style 区别 3.计算鼠标在盒子内的坐标 4.模态框拖拽 5.京东商品放大镜元素可视 ...
使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？
一.需求分析这两天讨论了一个项目需求,刚开始是希望:轮播图中嵌入视频,轮播到视频自动播放,播放完毕切换下一张轮播,手动切换时暂停播放视频.后面因为自动播放没有声音,便暂时放弃了这个想法(有知道或了解 ...
【插件的使用】——Swiper插件的应用
Swiper可以实现各种样式的轮播图效果.是一款非常好用的触摸滑动插件. 使用Swiper需要进入官网: 如何使用Swiper插件官网有详细的教程: 1.下载 (如果不想下载文件,下面有另外使用的方 ...
通过swiper插件制作旋转木马轮播图
实现效果: swiper插件准备我们旋转木马轮播图的效果可以通过swiper插件轻松搞定这种效果是不是和我们要做的很像呀,我们只要把它引入我们的案例就ok了在swiper官网的获取swiper下 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...

Swiper插件的简单使用

Swiper插件的简单使用

一、下载并引入文件

二、html内容

三、JavaScript内容

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

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

1、设置轮播图自动切换

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

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

Swiper插件的简单使用相关推荐

最新文章

热门文章