博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
swiper插件简介及用法
阅读量:5290 次
发布时间:2019-06-14

本文共 882 字,大约阅读时间需要 2 分钟。

swiper

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择

1.首先创建一个swiper的运行环境,需要用到的文件有swiper.min.js和swiper.min.css文件。

      ...    
        ...  
  
 

2.写HTML内容。

  
    
Slide 1
    
Slide 2
    
Slide 3
  
  
  

3.你可能想要给Swiper定义一个大小,当然不要也行。

.swiper-container {  width: 600px;  height: 300px;}

4.初始化Swiper:最好是挨着</body>标签 (函数调用)

    var swiper=new Swiper('.swiper-container',{

      autoplay:1000,//自动轮播
      autoplayDisableOnInteraction:false,//滑动后继续滚动
      loop:true,//循环
      pagination:'.swiper-pagination',//分页
      paginationClickable:true,//小圆点点击
      spaceBetween:30,//图片间隙
      direction:"horizontal"//默认横向 vertical垂直
    })

 

转载于:https://www.cnblogs.com/Coding--Peasant/p/7045392.html

你可能感兴趣的文章
归并排序的进一步理解
查看>>
C - Wooden Sticks
查看>>
Spring boot中普通工具类不能使用@Value注入yml文件中的自定义参数的问题
查看>>
[8.3] Magic Index
查看>>
(转·)WMPLib
查看>>
C语言结构体对齐
查看>>
跨应用Session共享
查看>>
Vue动态路由
查看>>
电脑小窍门
查看>>
IDEA环境设置
查看>>
Oracle行列转换小结
查看>>
W-D-S-链接地址
查看>>
3、图片处理
查看>>
HTML-日记3
查看>>
java enum 用法
查看>>
java常见文件操作
查看>>
python虚拟环境的安装和配置
查看>>
在eclipse中添加和删除项目
查看>>
Search a 2D Matrix & II
查看>>
网站更新后客户端缓存问题
查看>>