swiper按钮点击无效及控制器无效问题

点击箭头图片切换的同时,下面小图标也会随着切换,同理下面小图标切换时,上面也随着滚动。
示例代码如下:
<!-- Swiper -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(img/nature1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/nature2.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/nature3.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/nature4.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/nature5.jpg)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(img/nature1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/nature2.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/nature3.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/nature4.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/nature5.jpg)"></div>
</div>
</div> <!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script> <!-- Initialize Swiper -->
<script>
var galleryTop = new Swiper('.gallery-top', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
//改为:
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
spaceBetween: 10,
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true
});
galleryTop.params.control = galleryThumbs; //改为controller
galleryThumbs.params.control = galleryTop;//改为controller
</script>
但是,在使用时,点击箭头或者下面小图标确无效。
修改了以上红色地方后,就生效了。
swiper按钮点击无效及控制器无效问题的更多相关文章
- MVC中Spring.net 对基类控制器无效 过滤器控制器无效
比如现在我又一个BaseController作为基类控制器,用于过滤权限.登录判断等作用,其它控制由原本的继承Controller,改为继承BaseController.然后BaseControlle ...
- EasyTouch绑定事件在电脑上点击有效Android上无效的解决方法
最近做一个RPG类的游戏发现使用EasyTouch虚拟摇杆插件在电脑上点击有效Android上无效,查找资料发现是Easy Joystick中的一个属性interaction type要设置成 Dir ...
- Objective-C:模拟按钮点击事件理解代理模式
OC中的协议(Protocol)和和.NET中的接口(Interface)类似,简单来讲,就是一系列方法的列表,其中声明的方法可以被任何类实现.不同的是,在.NET中,如果某个类实现了一个接口,就必须 ...
- UITableViewCell上的按钮点击事件处理
转自: http://www.aichengxu.com/view/42871 UITableViewCell上的按钮点击事件处理,有需要的朋友可以参考下. 今天突然做项目的时候,又遇到处理自定义的 ...
- Runtime应用防止按钮连续点击 (转)
好久之前就看到过使用Runtime解决按钮的连续点击的问题,一直觉得没啥好记录的.刚好今天旁边同时碰到这个问题,看他们好捉急而且好像很难处理,于是我先自己看看… 前面自己也学习了很多Runtime的东 ...
- android 自定义控件——(五)按钮点击变色
----------------------------------按钮点击变色(源代码下有属性解释)------------------------------------------------- ...
- UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线
一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...
- 友盟(Swift)-集成、统计用户数量、具体页面访问数量、具体按钮点击数量
什么是友盟.有什么用? 这些傻瓜问题这里就不解释了,可以自己百度去. 友盟提供的文档和demo都是oc的,这里用swift写了一个小demo,在此分享一下. 步骤1:友盟后台注册应用(iOS),拿到a ...
- js触发按钮点击事件
js触发按钮点击事件 博客分类: javascript 模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...
随机推荐
- 【转】Selenium-WebDriverApi接口详解
浏览器操作 # 刷新 driver.refresh() # 前进 driver.forward() # 后退 driver.back() 获取标签元素 # 通过ID定位目标元素 driver.find ...
- MediaElement 不能显示的问题
1.记得在窗体的 Load 事件里面调用 Player1.Play();方法,就可以在窗体加载后就直接播放视频 2.WPF MediaElement其实和Windows系统自带的播放器是一样的,因此W ...
- iOS-代理设计模式delegate和protocol
充当代理的步骤: 首先要明确谁请别人代理,谁当别人的代理 1> 请代理三部曲: 1 写一个协议protoc,把自己不方便做的事列出来(@protocol studentDelegate < ...
- 【c# 学习笔记】密封类
密封类不可以被另外一个类继承,如果强行在代码中继承一个密封类,编译时就会产生错误. c#使用sealed关键字来定义密封类,如下: //定义密封类 public sealed class Sealed ...
- tp5博客项目实战1
tp5博客项目实战 开发准备:环境wamp,windows系统为例.看实战博客,默认会搭建开发环境并且tp5框架已经至少有一定的基础. tp5的下载与安装 方法一:直接在官网下载拷贝到wamp你的项目 ...
- 【转】git2.9.2使用总结
git2.9.2使用总结 1.系统:Windows7 2.git版本:2.9.2 由于我的git版本是最新版,后面我出现的坑就是最新版本的问题. 3.托管环境:开源中国的码云 . 使用步骤 1.在码云 ...
- 在vue中使用axios发送post请求,参数方式
由于后台接收的参数格式为FormData格式, 在axios中参数格式默认为, 在传参数前,将原先官方提供的格式 改为如下: axios({ url: '../../../room/listRoomP ...
- Reporting Service 2016 匿名访问配置
环境:SQL SERVER 2016 一.修改配置文件 需要修改的配置文件目录C:\Program Files\Microsoft SQL Server\MSRS13.MSSQLSERVER\Repo ...
- Feeding Time 【bfs求最大连通块】
题目链接:https://ac.nowcoder.com/acm/contest/1870/J 题目大意:求最大的连通块是多大 主要是为了防止自己忘记bfs怎么写..... #include<s ...
- RISC-V汇编指南
原文出处:https://github.com/riscv/riscv-asm-manual/blob/master/riscv-asm.md RISC-V Assembly Programmer's ...