CSS3 swiper框架

2018-11-27  本文已影响0人  祝名

主要用于pc端轮播图,移动端的轮播,滑停效果,h5界面效果

网址:https://www.swiper.com.cn/

一.swiper使用方法(基础配置)

使用方法网址:https://www.swiper.com.cn/usage/index.html


二.swiper自定义配置

1. 配置好swiper的基础内容后,利用API修改配置自己想要的样式
基础配置好后的效果
2.swiper API

三.swiper实现京东轮播图

1. css样式修改,在浏览器中利用控制台找到相应的css选择器,复制覆盖填入属性即可
修改分页器效果
利用after伪元素代替修改结构,产生相应效果

四.swiper实现小米滑动效果




五.swiper animate运动的实现

swiper animate使用方法网址:
https://www.swiper.com.cn/usage/animate/index.html


六.一个页面实现多个分页器



上一篇下一篇

猜你喜欢

热点阅读