使用Swiper轮播插件引起的探索
提到Swiper轮播插件,小伙伴们应该不会感到陌生。以前我主要在移动端上使用,PC端使用较少。
注:这里需要注意的是,在PC端和移动端使用Swiper是不同的
官方给的版本有三个,分别是Swiper2,Swiper3,Swiper4
注:如果在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 不同的地方
var mySwiper = new Swiper('.swiper-container',{
autoplay : true,
})
$('.swiper-slide').mouseover(function() {
mySwiper.autoplay.stop(); // 暂停播放
}) $('.swiper-slide').mouseout(function() {
mySwiper.autoplay.start(); // 开始播放
})
使用Swiper轮播插件引起的探索的更多相关文章
- vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
- Swiper轮播插件使用
前文 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 归根到此,Swi ...
- Swiper 轮播插件 之 动态加载无法滑动
1.原因:轮播图未完全动态加载完成,即初始化 2.方法一:ajax链式编程 $.ajax({ type: "get", url: serviceURL + "/listB ...
- 使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题
因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度.通过调整js加载顺序,问题还是没有解决. 最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的, ...
- Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址
Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...
- 【swiper轮播插件】解决swiper轮播插件触控屏问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中添加swiper轮播插件
网上找了很多,最后还是官网最完整. https://github.com/surmon-china/vue-awesome-swiper 安装: 1.npm install vue-awesome-s ...
- swiper轮播在ie浏览器上遇到的显示问题探索
前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...
- swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
随机推荐
- 关于JSON字符串的处理与总结 【原创】
这两天帮另一个实习生处理点前端的问题 遇到点JSON的处理 总结如下 ①一个JSON字符串 JSON.Parse(JSON字符串)—>JSON对象Object ②一个JSONArray ...
- 安装vmtools之后任然不能在虚拟机和主机之间复制粘贴的问题
安装vmtools之后任然不能在虚拟机和主机之间复制粘贴的问题 都是因为这个进程没有启动起来,你只需要在启动后在终端输入 "/usr/bin /vmware-user" 就可以手动 ...
- Java 读书笔记 (八) 修饰符
Java语言提供了很多修饰符,主要分为以下两类: 访问修饰符 非访问修饰符 访问控制修饰符 default (即缺省,什么也不写): 在同一包内可见,不使用任何修饰符.使用对象.类.接口.变量.方法. ...
- rename_windows.go
{ if err != nil { return err } return syscall.EINVAL } r ...
- session.go
package { so.ttl = ttl } } } // WithContext assigns a context to the session ...
- sort.go
package clientv3 type SortTarget int type SortOrder int const ( SortNone SortOrder = iota So ...
- Spring_JDBC
//User实体类 package com.tao.pojo; public class User { private int id; private String name; private Str ...
- java基础系列之ConcurrentHashMap源码分析(基于jdk1.8)
1.前提 在阅读这篇博客之前,希望你对HashMap已经是有所理解的,否则可以参考这篇博客: jdk1.8源码分析-hashMap:另外你对java的cas操作也是有一定了解的,因为在这个类中大量使用 ...
- JAVA基础第五章-集合框架Map篇
业内经常说的一句话是不要重复造轮子,但是有时候,只有自己造一个轮子了,才会深刻明白什么样的轮子适合山路,什么样的轮子适合平地! 我将会持续更新java基础知识,欢迎关注. 往期章节: JAVA基础第一 ...
- 【坑】解决CentOS 7.1版本以上安装好zabbix 3.4 无法重启zabbix-server的问题
1. 问题所在 报错信息:zabbix_server[]: segfault at ip 00007f78842b4bd0 sp 00007fff1995a818 error ] 2. 产生原因 Ce ...