提到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. postman的安装与使用(模拟请求)

    最近需要测试产品中的REST API,无意中发现了PostMan这个chrome插件,把玩了一下,发现postman秉承了一贯以来google工具强大,易用的特质.独乐乐不如众乐乐,特此共享出来给大伙 ...

  2. 关于for循环里面异步操作的问题

    首先来看一个比较简单的问题,我们想实现的就是每隔1s输出0-4的值,就是这么简单,看下错误写法: function test() { for (var i = 0; i < 5; ++i) { ...

  3. Log4j2中RollingFile的文件滚动更新机制

    一.什么是RollingFile RollingFileAppender是Log4j2中的一种能够实现日志文件滚动更新(rollover)的Appender. rollover的意思是当满足一定条件( ...

  4. SpringCloud实战8-Bus消息总线

    好了现在我们接着上一篇的随笔,继续来讲.上一篇我们讲到,我们如果要去更新所有微服务的配置,在不重启的情况下去更新配置,只能依靠spring cloud config了,但是,是我们要一个服务一个服务的 ...

  5. config.go 源码阅读

    package main import (     "io/ioutil"     "launchpad.net/goyaml" ) // ProxyConfi ...

  6. golang实现权重轮询调度算法

    package main import ( "fmt" "time" ) var slaveDns = map[int]map[string]interface ...

  7. 在MFC中通过访问IP地址下载文件到本地

    void CDownLoad::OnBnClickedOk() { // TODO: 在此添加控件通知处理程序代码 CDialogEx::OnOK(); UpdateData(TRUE); CStri ...

  8. WPF 列表开启虚拟化的方式

    正确开启虚拟化的方式 列表如ListBox,ListView,TreeView,GridView等,开启虚拟化 ScrollViewer设置CanContentScroll=True 直接在模板中,设 ...

  9. 在Jenkins中使用sonar进行静态代码检查

    要解决的问题 jenkins自动构建完成后,希望能通过sonar静态代码检查生成一份报告,给与开发人员对当前代码的做一个质量评估和修改意见 1.安装并配置sonar服务器 懒得说,跟着官方文档走就行, ...

  10. 解决linux netcore https请求使用自签名证书忽略安全检查方法

    当前系统环境:centos7 x64. dotnet 2.0. 不管是 ServicePointManager.ServerCertificateValidationCallback = (a, b, ...