点击箭头图片切换的同时,下面小图标也会随着切换,同理下面小图标切换时,上面也随着滚动。

示例代码如下:

 <!-- 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按钮点击无效及控制器无效问题的更多相关文章

  1. MVC中Spring.net 对基类控制器无效 过滤器控制器无效

    比如现在我又一个BaseController作为基类控制器,用于过滤权限.登录判断等作用,其它控制由原本的继承Controller,改为继承BaseController.然后BaseControlle ...

  2. EasyTouch绑定事件在电脑上点击有效Android上无效的解决方法

    最近做一个RPG类的游戏发现使用EasyTouch虚拟摇杆插件在电脑上点击有效Android上无效,查找资料发现是Easy Joystick中的一个属性interaction type要设置成 Dir ...

  3. Objective-C:模拟按钮点击事件理解代理模式

    OC中的协议(Protocol)和和.NET中的接口(Interface)类似,简单来讲,就是一系列方法的列表,其中声明的方法可以被任何类实现.不同的是,在.NET中,如果某个类实现了一个接口,就必须 ...

  4. UITableViewCell上的按钮点击事件处理

    转自:  http://www.aichengxu.com/view/42871 UITableViewCell上的按钮点击事件处理,有需要的朋友可以参考下. 今天突然做项目的时候,又遇到处理自定义的 ...

  5. Runtime应用防止按钮连续点击 (转)

    好久之前就看到过使用Runtime解决按钮的连续点击的问题,一直觉得没啥好记录的.刚好今天旁边同时碰到这个问题,看他们好捉急而且好像很难处理,于是我先自己看看… 前面自己也学习了很多Runtime的东 ...

  6. android 自定义控件——(五)按钮点击变色

    ----------------------------------按钮点击变色(源代码下有属性解释)------------------------------------------------- ...

  7. UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线

    一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...

  8. 友盟(Swift)-集成、统计用户数量、具体页面访问数量、具体按钮点击数量

    什么是友盟.有什么用? 这些傻瓜问题这里就不解释了,可以自己百度去. 友盟提供的文档和demo都是oc的,这里用swift写了一个小demo,在此分享一下. 步骤1:友盟后台注册应用(iOS),拿到a ...

  9. js触发按钮点击事件

    js触发按钮点击事件 博客分类: javascript   模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...

随机推荐

  1. 002-02-RestTemplate-初始化调用流程

    一.简述 调用 RestTemplate 的默认构造函数,RestTemplate 对象在底层通过使用 java.net 包下的实现创建 HTTP 请求,可以通过使用 ClientHttpReques ...

  2. OSG 遍历fbx节点

    count:560 construction_worker 4294967295 osg::MatrixTransform1 Bip001 L Finger02 4294967295 osg::Mat ...

  3. Greenwich.SR2版本的Spring Cloud Zuul实例

    网关作为对外服务,在微服务架构中是一个很重要的组件,主要体现在动态路由和接入鉴权这两个功能上.现在我们通过Spring Cloud Zuul来实现对之前a-feign-client(参见Greenwi ...

  4. (四)java对象的结构和对象的访问定位

    在HotSpot虚拟机中,对象在内存中存储的布局可以分为3块区域:对象头(Header).实例数据(Instance Data)和对齐填充(Padding). 一. 对象头 HotSpot虚拟机的对象 ...

  5. 【Leetcode_easy】748. Shortest Completing Word

    problem 748. Shortest Completing Word 题意: solution1: class Solution { public: string shortestComplet ...

  6. react中如何实现一个按钮的动态隐藏和显示(有效和失效)

    初始准备工作 constructor(props) { super(props); /* * 构建导出数据的初始参数,结合用户下拉选择后动态设置参数值 * */ this.state = { btnS ...

  7. [CareerCup] Single Valid Tree

    https://www.careercup.com/question?id=5103530547347456 Given a list of nodes, each with a left child ...

  8. Kotlin教程

    Kotlin是一种静态类型的编程语言,由JetBrains开发.如果你有Java的基础知识,你很快就能学会Kotlin.这个Kotlin教程是为初学者设计的,因此即使您不了解Java,也可以理解Kot ...

  9. SQL 创建表

    SQL 创建表是通过SQL CREATE TABLE 语句来实现,该语句是DDL SQL语句.CREATE TABLE语句用于创建用于存储数据的表.在创建表时,可以为列定义主键.惟一键和外键等完整性约 ...

  10. IBM.WMQ订阅主题,连续获取消息解决办法

    去队列里面一直获取消息,一开始想到了两种解决方案: 第一:订阅一次获取一次消息,正常的话每次都能获取到,但是要及时去清理订阅并且时间粒度不好控制 第二:订阅一次,再获取消息这里加死循环,超时MQ已经做 ...