一起来了解下Swiper插件的使用和介绍

Swiper介绍

swiper是一款开源的解决前端开发中触摸滑动案例的插件

swiper官网:

一起来了解下Swiper插件的使用和介绍_第1张图片

swiper的使用

使用swiper首先要下载swiper

 下载完成后在官网在线演示中找到你所需要的

 这里我选择了基础演示中的010

一起来了解下Swiper插件的使用和介绍_第2张图片

 首先在你下载的压缩包中找到010的demo文件

一起来了解下Swiper插件的使用和介绍_第3张图片

 打开后点击鼠标右键打开网页源代码

打开编辑器在自己项目中引入swiper.min.css        swiper-bundle.min.js  两个文件

复制打开的网页源代码中的结构html  样式css以及js代码

最后就可以使用swiper插件

代码实现




    
    Swiper demo
    
    
    
    
    


    
    
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9

最后如果想改变Swiper插件的API可以阅读API文档,然后结合项目更改

一起来了解下Swiper插件的使用和介绍_第4张图片

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容! 

你可能感兴趣的:(一起来了解下Swiper插件的使用和介绍)