提到Swiper轮播插件,小伙伴们应该不会感到陌生。以前我主要在移动端上使用,PC端使用较少。

  注:这里需要注意的是,在PC端和移动端使用Swiper是不同的

  官方给的版本有三个,分别是Swiper2,Swiper3,Swiper4

  Swiper2官网:https://2.swiper.com.cn/
 
  Swiper3官网:https://3.swiper.com.cn/
 
  Swiper4官网:https://www.swiper.com.cn/

  

  注:如果在PC端使用,推荐使用Swiper2;移动端使用 Swiper3 或 Swiper4 ;官方解释如下图:

  

   

  那么问题来了,三个版本之间到底有什么区别呢?以下是官方截图:

  

  

  

  在使用过程当中,PC端和移动端分别遇到了一个问题

  移动端问题:设置自动轮播属性后没有效果?(已确认引入css,js文件路径和版本正确)

  解:因为我引入的css,js文件是Swiper4版本, 但我用的却是 Swiper3版本的设置方法

    Swiper3设置自动播放:autoplay: 3000

    Swiper4设置自动播放:autoplay: { delay: 3000 },(也可以这样设置autoplay:  true 设置后默认3秒自动切换,)

  Swiper4将组件的相关选项整合起来了,并且修改了回调函数获取swiper实例的方式为this关键词

  下图是官方给l的 Swiper3 API 和 Swiper4 API 不同的地方

  

   PC端遇到的问题:想要鼠标移入轮播图后暂停播放,鼠标移出轮播图后恢复播放
 
  解:Swiper本身没有封装鼠标移入移出事件,需要自行添加,然后调用相关API(mySwiper.autoplay.stop(); 和 mySwiper.autoplay.start();)
  
  

             var mySwiper = new Swiper('.swiper-container',{
           autoplay : true,
         })
          
         $('.swiper-slide').mouseover(function() {
mySwiper.autoplay.stop(); // 暂停播放
}) $('.swiper-slide').mouseout(function() {
mySwiper.autoplay.start(); // 开始播放
         })

  

  

  

使用Swiper轮播插件引起的探索的更多相关文章

  1. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  2. Swiper轮播插件使用

    前文 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.                 归根到此,Swi ...

  3. Swiper 轮播插件 之 动态加载无法滑动

    1.原因:轮播图未完全动态加载完成,即初始化 2.方法一:ajax链式编程 $.ajax({ type: "get", url: serviceURL + "/listB ...

  4. 使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题

    因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度.通过调整js加载顺序,问题还是没有解决. 最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的, ...

  5. Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址

    Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...

  6. 【swiper轮播插件】解决swiper轮播插件触控屏问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue中添加swiper轮播插件

    网上找了很多,最后还是官网最完整. https://github.com/surmon-china/vue-awesome-swiper 安装: 1.npm install vue-awesome-s ...

  8. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

  9. swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

随机推荐

  1. Base64 image

    [前端攻略]:玩转图片Base64编码 什么是 base64 编码? 我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样 ...

  2. VMware12下CentOS 7安装教程

    CentOS 7 DVD安装光盘(百度搜索CentOS即可找到官方主页):VMware Workstation 12 Pro及以上软件: 启动VMware Workstation 12 Pro程序,在 ...

  3. Python字符串的操作

    字符串常用操作 name = "my name is alex" # 注: python中方法名前后带下划线的是供内部使用的方法, 如方法__dir__(). 这种方法是不对外提供 ...

  4. mutex.go

    package} } ) ].GetResponseRange().Kvs[].CreateRevision )     return nil } func (m *Mutex) IsOwner() ...

  5. bzoj5248 [2018多省省队联测]一双木棋

    直接hash+爆搜即可. #include <cstdio> #include <cstring> #include <iostream> #include < ...

  6. BZOJ_1040_[ZJOI2008]骑士_树形DP

    BZOJ_1040_[ZJOI2008]骑士_树形DP 题意: Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各 界的赞扬.最近发生了一件可怕的事情,邪 ...

  7. laravel5.5解决小程序登陆态的问题

    修改一个文件 : vendor\laravel\framework\src\Illuminate\Session\Middleware\StartSession.php 找到getSession()方 ...

  8. CTF中常见的加解密(经典)

    今天一早起来,就要去做早操,心里苦呀! 但是不影响我为未来的学弟学妹整理资料的心情呀!希望我的一些拙见能够帮助到学弟学妹! 永远爱你们的 ---- 新宝宝 ASCII编码 ASCII 码使用指定的7 ...

  9. djiango的模板语言(template)

    老师的博客:http://www.cnblogs.com/liwenzhou/p/7931828.html 官方文档:https://docs.djangoproject.com/en/1.11/re ...

  10. [AST实战]从零开始写一个wepy转VUE的工具

    为什么需要 wepy 转 VUE "转转二手"是我司用 wepy 开发的功能与 APP 相似度非常高的小程序,实现了大量的功能性页面,而新业务 H5 项目在开发过程中有时也经常需要 ...