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

示例代码如下:

  1. <!-- Swiper -->
  2. <div class="swiper-container gallery-top">
  3. <div class="swiper-wrapper">
  4. <div class="swiper-slide" style="background-image:url(img/nature1.jpg)"></div>
  5. <div class="swiper-slide" style="background-image:url(img/nature2.jpg)"></div>
  6. <div class="swiper-slide" style="background-image:url(img/nature3.jpg)"></div>
  7. <div class="swiper-slide" style="background-image:url(img/nature4.jpg)"></div>
  8. <div class="swiper-slide" style="background-image:url(img/nature5.jpg)"></div>
  9. </div>
  10. <!-- Add Arrows -->
  11. <div class="swiper-button-next swiper-button-white"></div>
  12. <div class="swiper-button-prev swiper-button-white"></div>
  13. </div>
  14. <div class="swiper-container gallery-thumbs">
  15. <div class="swiper-wrapper">
  16. <div class="swiper-slide" style="background-image:url(img/nature1.jpg)"></div>
  17. <div class="swiper-slide" style="background-image:url(img/nature2.jpg)"></div>
  18. <div class="swiper-slide" style="background-image:url(img/nature3.jpg)"></div>
  19. <div class="swiper-slide" style="background-image:url(img/nature4.jpg)"></div>
  20. <div class="swiper-slide" style="background-image:url(img/nature5.jpg)"></div>
  21. </div>
  22. </div>
  23.  
  24. <!-- Swiper JS -->
  25. <script src="../dist/js/swiper.min.js"></script>
  26.  
  27. <!-- Initialize Swiper -->
  28. <script>
  29. var galleryTop = new Swiper('.gallery-top', {
  30. nextButton: '.swiper-button-next',
  31. prevButton: '.swiper-button-prev',
    //改为:

navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
         },

  1. spaceBetween: 10,
  2. });
  3. var galleryThumbs = new Swiper('.gallery-thumbs', {
  4. spaceBetween: 10,
  5. centeredSlides: true,
  6. slidesPerView: 'auto',
  7. touchRatio: 0.2,
  8. slideToClickedSlide: true
  9. });
  10. galleryTop.params.control = galleryThumbs; //改为controller
  11. galleryThumbs.params.control = galleryTop;//改为controller
  12.  
  13. </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. osg::Camera example

    #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...

  2. PAT 甲级 1031 Hello World for U (20 分)(一开始没看懂题意)

    1031 Hello World for U (20 分)   Given any string of N (≥) characters, you are asked to form the char ...

  3. C#线程 BeginInvoke和EndInvoke使用方法

    一.C#线程概述 在操作系统中一个进程至少要包含一个线程,然后,在某些时候需要在同一个进程中同时执行多项任务,或是为了提供程序的性能,将要执行的任务分解成多个子任务执行.这就需要在同一个进程中开启多个 ...

  4. .Net Core 请求上下文IHttpContextAccessor

    namespace Microsoft.AspNetCore.Http { public interface IHttpContextAccessor { HttpContext HttpContex ...

  5. Demo客户端相关规范 v1.0

    目录 开发环境 开发工具 代码管理 项目代码 分支管理 名称管理 打包管理 存储路径 存储结构 测试包 正式包 名称管理 依赖组件 内部组件 外部组件 解决方案结构 解决方案命名 解决方案文件夹 项目 ...

  6. 使用GDAL进行波段分离

    波段分离一般最常用的还是OpenCV,使用OpenCV的split方法可以直接对波段分离,并且效果不错,但是有一个问题是只能处理有限波段的数据,比如波段超过一定的数目就无法完成波段分离工作,或者数据有 ...

  7. 三节课MINI计划第四周

    一.任务 二.任务一 (一)梳理产品卖点 (二)策划线上活动 三.任务二 四.周报

  8. kali安装chrome

    文章搬到自己的网站上,如下: http://101.132.137.140:202/archives/2019-11-25

  9. CDH建表字符集问题

    登陆metadata数据库: show variables like 'character_set%'; alter database hivemeta default character set l ...

  10. 在airflow的BashOperator中执行docker容器中的脚本容易忽略的问题

    dag模板 from airflow import DAG from airflow.operators.bash_operator import BashOperator from airflow. ...