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就销毁swiperif(mySwiper.slides.length<=3){mySwiper.destroy();}*/
</script>

效果如下图（其实我在拖着他换图）

**注意**

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

swiper插件的使用（快速实现轮播图）相关推荐

非常优秀的swiper插件————幻灯片播放、图片轮播
非常优秀的swiper插件----幻灯片播放.图片轮播 http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 S ...
axure原型怎么让文字自动换行_Axure动态面板教程（快速入门+轮播图案例）
动态面板(Dynamic Panel)是Axure的核心功能之一,但很多初学者都反馈理解有难度,今天用一个简单的例子让大家快速掌握它,并且学会做一个常用的轮播图. 12月21日更新:B站视频版教程: ...
slides.jquery.js快速实现轮播图效果
最近在做项目的时候,发现了这款插件slides.jquery.js,操作起来非常简单,不用自己去敲js代码,只需要简单配置几个属性就可以实现幻灯片轮播了. 使用例子: tips:这个例子不做过多样式的 ...
html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法在页面中引入jqu ...
swiper + vue 中间大两边小轮播图
展示效果代码字体16px 框架vuetify <template><v-main><div class="body_height ofs"> ...
微信小程序实现非swiper组件的自定义伪3D轮播图
效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...
jq自定义插件—$.fn的使用之(轮播图)兼容性都ok
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
angular引用swiper插件绘制中间大两边依次缩小的轮播图
初步使用安装前人栽树后人乘凉,已经有大佬们封装好了. npm install swiper npm install @types/swiper 使用在需要应用的模块中引入SwiperModule ...

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

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

1.进入swiper官网

2.选择代码包进行引用

3.进入官网的API文档

4.前端效果演示

swiper插件的使用（快速实现轮播图）相关推荐

最新文章

热门文章