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

2024-07-09 13:53| 来源: 网络整理| 查看: 265

swiper插件的使用（快速实现轮播图） 1.进入swiper官网2.选择代码包进行引用3.进入官网的API文档4.前端效果演示

1.进入swiper官网在获取Swiper下点击Swiper CDN地址

在这里插入图片描述

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

在这里插入图片描述

2.选择代码包进行引用我们引用两个压缩过的代码文件，就叫他代码包吧插入代码时候注意，我们在引用的代码上稍作修改，改一下版本。统一改成4.01，如下图

在这里插入图片描述

3.进入官网的API文档

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

4.前端效果演示

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

DOCTYPE html> Title body{ margin: 0; } .swiper { width: 100%; height: 300px; } .swiper img{ width: 100%; height: 100%; } var mySwiper = new Swiper('.swiper',{ loop : true, }) /*如果只有一个slide就销毁swiper if(mySwiper.slides.length

【本文地址】

公司简介

联系我们