如何用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>

七、显示轮播图