如何用swiper快速实现一个轮播图
Posted 脱发困扰 Not Found
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用swiper快速实现一个轮播图相关的知识，希望对你有一定的参考价值。
一、进入swiper官网，下载swiper框架，https://www.swiper.com.cn/
二、创建项目
创建swiperdemo文件夹，在下面再分别创建css、js、images文件夹
三、从下载的swiper文件中把swiper-bundle.min.css和swiper-bundle.min.js两个文件分别复制到swiper下的css和js文件夹中，所需要的图片文件放在images文件夹中
四、在当前文件夹下创建admin.html文件
五、在admin.html文件中把两个文件引入
要注意相对路径。
六、编辑admin.html文件并进行调试
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./images/1.png" /></div>
<div class="swiper-slide"><img src="./images/2.png" /></div>
<div class="swiper-slide"><img src="./images/3.png" /></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="./js/swiper-bundle.min.js"></script>
<script>
var mySwiper = new Swiper (\'.swiper-container\', {
loop: true, // 循环模式选项
autoplay:true, //自动播放
navigation: {
nextEl: \'.swiper-button-next\',
prevEl: \'.swiper-button-prev\',
}
})
</script>
</body>
</html>
七、显示轮播图
以上是关于如何用swiper快速实现一个轮播图的主要内容，如果未能解决你的问题，请参考以下文章