图示

概念

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

CDN

https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css
https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js

使用步骤

引入CSS和js文件
设置容器

初始化swiper

<div class="swiper-container">  最外层容器<div class="swiper-wrapper"><div class="swiper-slide"><img src="img/j1.jpg" alt=""></div><div class="swiper-slide"><img src="img/j2.jpg" alt=""></div><div class="swiper-slide"><img src="img/j3.jpg" alt=""></div><div class="swiper-slide"><img src="img/j4.jpg" alt=""></div></div>
</div>

基本知识点

自动播放

autoplay:true, //等同于以下设置
autoplay: {delay: 3000,stopOnLastSlide: false,disableOnInteraction: true
}

设置分页

pagination: {el: '.swiper-pagination'
},

设置左右箭头

navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'
},

设置滚动条
```
scrollbar: {el: '.swiper-scrollbar'
}
```

进阶知识点

修改箭头颜色

<div class="swiper-button-prev swiper-button-black"></div> <!-- 白色 -->
<div class="swiper-button-next swiper-button-black"></div> <!-- 黑色 -->

添加分页

pagination: {el: '.swiper-pagination',type: 'bullets',// type: 'fraction',// type : 'progressbar',// type : 'custom',
},

切换效果

// effect : 'fade',
effect : 'cube',
// effect : 'coverflow',
// effect : 'flip',

循环
```
loop : true,
```
切换速度（单位：毫秒）
```
speed: 2000,
```
方向
```
direction: 'vertical'
```

案例

手机全屏：手机全屏

移动新闻：新闻界面

Swiper：基础学习相关推荐

【转】oracle PLSQL基础学习
[转]oracle PLSQL基础学习 --oracle 练习: /**************************************************PL/SQL编程基础****** ...
python创建对象的格式为_Python入门基础学习(面向对象)
python基础学习笔记(四) 面向对象的三个基本特征: 封装:把客观事物抽象并封装成对象,即将属性,方法和事件等集合在一个整体内继承:允许使用现有类的功能并在无须重新改写原来的类情况下,对这些功能 ...
虚幻引擎虚拟现实开发基础学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了 ...
动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals
如何分类--动画产业基础大小解压后:6.2G 含课程素材 1920X1080 mp4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 信息: 绘画技巧.解剖学.角色设计.透视和整体讲故事--这门 ...
Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender
Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender Blender纹理基础学习视频教程 CGCookie – Funda ...
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course! 教程大小解压后:4.96G 语言:英语+中英文字幕(机译)时长 ...
0基础学好python难不难_零基础学习Python难不难？Python有什么优势？
原标题:零基础学习Python难不难?Python有什么优势? Python是一种计算机程序设计语言.首先,我们普及一下编程语言的基础知识.用任何编程语言来开发程序,都是为了让计算机干活,比如下载一个 ...
计算机一级ps2019,2019年计算机一级考试PS基础学习点子：PS菜单中英文对照表.docx...
2019 年计算机一级考试 PS 基础学习点子: PS 菜单中英文对照表 PS菜单中英文对照表一.File New 2.Open 3.Open As 4.Open Recent Close 6.Sa ...
Java零基础学习难吗
java编程是入行互联网的小伙伴们大多数的选择,那么对于零基础的小伙伴来说Java零基础学习难吗?如果你是初学者,你可以很好的理解java编程语言.并不困难.如果你的学习能力比较高,那么你对Java的 ...
零基础学习java，这些书一定要看!
学习java技术除了看视频,看书也是非常重要的,尤其是零基础同学,本文包含学习Java各个阶段的书籍推荐,史上最全,学习Java,没有书籍怎么行,就好比出征没带兵器一个道理,这些书籍整理出来给大家作为 ...

Swiper：基础学习

图示

概念

CDN

使用步骤

基本知识点

进阶知识点

案例

手机全屏：手机全屏

移动新闻：新闻界面

Swiper：基础学习相关推荐

最新文章

热门文章

Swiper：基础学习

图示

概念

CDN

使用步骤

基本知识点

进阶知识点

案例

手机全屏：手机全屏

移动新闻： 新闻界面

Swiper：基础学习相关推荐

最新文章

热门文章

移动新闻：新闻界面