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>

但是,在使用时,点击箭头或者下面小图标确无效。

修改了以上红色地方后,就生效了。

原文地址:https://www.cnblogs.com/colorful-paopao1/p/11622295.html

时间: 2024-08-07 16:41:31

swiper按钮点击无效及控制器无效问题的相关文章

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

比如现在我又一个BaseController作为基类控制器,用于过滤权限.登录判断等作用,其它控制由原本的继承Controller,改为继承BaseController.然后BaseController重写Controller中方法OnActionExecuting 当我们此时再访问 User控制器下的某个Action,那么问题就来了,服务器会先执行BaseController中的OnActionExecuting方法,而此时,iu并没有由spring.net创建!!依旧为null 经过几次测试

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

最近做一个RPG类的游戏发现使用EasyTouch虚拟摇杆插件在电脑上点击有效Android上无效,查找资料发现是Easy Joystick中的一个属性interaction type要设置成 Direct and event,默认的是Event Notification,也就是事件通知,因为进行的方向的改变,所用属性interaction type要选方向和事件.

添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常

这两天想在网页中添加一个添加浮动按钮,点击该按钮滚动则到网页底部.在网上bing搜索了一下,大多是JQuery的. 我想要纯JavaScript的,只好DIY了.在IE9.11,Maxthon 1.6.7,Firefox30.31,360极速浏览器7.5.3.308下测试正常. 其中难点在于,setScrollBottom这个函数. 按常规写法: function setScrollBottom(value) { if (document.documentElement.scrollTop){

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

OC中的协议(Protocol)和和.NET中的接口(Interface)类似,简单来讲,就是一系列方法的列表,其中声明的方法可以被任何类实现.不同的是,在.NET中,如果某个类实现了一个接口,就必须实现这个接口中声明的所有方法:但在OC中,可以不实现协议中声明的所有方法,需要用到某些功能,就去实现对应的方法即可. 这种模式一般称为代理模式.在iOS和OS X开发中,Apple采用了大量的代理模式来实现MVC中View(UI控件)和Controller(控制器)的解耦. 监听思想:如果想让某个对

将UIAlertView的按钮点击代理方式改为Block形式

   block类似C语言的函数指针,但Blocks不是一个指针,而是一个不带名字的函数(匿名的代码块).在这里我就不赘述了,说说将UIAlertView的按钮点击代理方式改为Block形式.代码中定义的全局变量_index与本文主要内容无关,在下一篇,我会详细说明Block的相互引用问题 //控制器ViewController.h文件   1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4

Android实现按钮点击效果(第一次点击变色,第二次恢复)

1.首先创建一个按钮 <Button android:id="@+id/click" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="点击变色" android:background="@drawable/btn_st" android:gravity="center&

【转】Android开发20——单个监听器监听多个按钮点击事件

原文网址:http://woshixy.blog.51cto.com/5637578/1093936 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://woshixy.blog.51cto.com/5637578/1093936 一.单个按钮点击事件的监听 方法一 /** * 从网络上获取图片 * * @author 徐越 * */ public class MainActivity extends Activity { pri

设置警告框样式为带有两个文本输入的警告框,用于收集用户收货地址和联系电话。并选择合适的代理方法,当警告框上的两输入框有一个为空时限制“购买”按钮点击。

收集购物信息  iOS项目 倒计时:588 步骤 /.panel-heading 项目需求 设置警告框样式为带有两个文本输入的警告框,用于收集用户收货地址和联系电话.并选择合适的代理方法,当警告框上的两输入框有一个为空时限制“购买”按钮点击. #import "TableViewController.h" @interface TableViewController ()<UIAlertViewDelegate> @property (nonatomic, strong)

当一个按钮点击不了时,鼠标可以自定义的样式

现在很多网站流行做法,当一个按钮点击不了的时候,会给用户一个略显优雅的提示,即鼠标手势的样式发生变化.简单的样式变化. 图方便就利用下jquery...主要就是注意下,cursor值的用法 $('#www').mouseout(function(){ $('body').css('cursor', 'default'); }); $('#www').mouseover(function(){ $('body').css({'cursor':'url("cursor.png"),defa