swiper插件的使用（快速实现轮播图）

尹蓝锐

已于 2022-04-04 14:19:44 修改

阅读量1.2k

点赞数

分类专栏：前端HTML 文章标签： javascript 前端 vue.js

于 2021-12-06 22:13:28 首次发布

本文链接：https://blog.csdn.net/weixin_52249641/article/details/121757086

版权

前端HTML 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

swiper插件的使用（快速实现轮播图）

1.进入swiper官网
2.选择代码包进行引用
3.进入官网的API文档
4.前端效果演示

1.进入swiper官网

在获取Swiper下点击Swiper CDN地址

在这里插入图片描述

你会看到以下代码，以下代码可直接用，但是我们只选择我们要用的

在这里插入图片描述

2.选择代码包进行引用

我们引用两个压缩过的代码文件，就叫他代码包吧

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/js/swiper.min.js"></script>

插入代码时候注意，我们在引用的代码上稍作修改，改一下版本。统一改成4.01，如下图

在这里插入图片描述

3.进入官网的API文档

已经成功完成以上步骤的话我们就可以去api文档中选择想要的轮播图效果啦！！！
在这里插入图片描述
我们可以看到有很多效果，每一种效果都有js文件代码提供，我们复制即可！！！

4.前端效果演示

我们将步骤三的代码复制到我们HTML中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
    <style>
        body{
            margin: 0;
        }
        .swiper {
            width: 100%;
            height: 300px;
        }
        .swiper img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="https://img0.baidu.com/it/u=3436810468,4123553368&fm=26&fmt=auto" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://img2.baidu.com/it/u=1729250424,3321747351&fm=26&fmt=auto" alt="">
        </div>
    </div>
</div>

</body>

<script>
    var mySwiper = new Swiper('.swiper',{
        loop : true,
    })
    /*如果只有一个slide就销毁swiper
      if(mySwiper.slides.length<=3){
        mySwiper.destroy();
      }*/
</script>

效果如下图（其实我在拖着他换图）
在这里插入图片描述

**注意**

并不是每个h5的结构都是由自己设计主导的，有时候为了得到轮播图的效果，我们也需要遵循
官网提供的结构，就比如下一例子

在这里插入图片描述

尹蓝锐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
swiper插件的使用（快速实现轮播图）

swiper插件的使用（快速实现轮播图）1.进入swiper官网2.选择代码包进行引用3.进入官网的API文档4.前端效果演示1.进入swiper官网在获取Swiper下点击Swiper CDN地址你会看到以下代码，以下代码可直接用，但是我们只选择我们要用的2.选择代码包进行引用我们引用两个压缩过的代码文件，就叫他代码包吧<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x
复制链接

扫一扫