jQuery Lightslider 插件分页器 onclick 事件

Posted 2023-05-09

【中文标题】jQuery Lightslider 插件分页器 onclick 事件

【英文标题】：jQuery lightslider plugin pager onclick event

【发布时间】：2015-12-04 23:16:05

【问题描述】：

我想获取jquery lightslider插件的pager元素的onclick事件，我试过下面的代码，

var $slide = $('#light-slider').parent('.lSSlideWrapper');
var $cSouter = $slide.parent();
var $pager = $cSouter.find('.lSPager').find('li').find('a');            
console.log($pager);
$pager.on('click',function()
    console.log('test');                
);

pager 的 console.log 打印以下值

[a, a, a, a, prevObject: n.fn.init[4], context: document, selector: ".lSPager li a"]

但是链接onclick事件没有触发，请问我做错了什么。

【问题讨论】：

是否必须在单击按钮时进行，还是在幻灯片切换到下一个或上一个时执行操作就足够了？

其实点击pager时幻灯片会暂停，但我想在10秒后播放

嗯，我不确定我是否跟随。你能做一个 jsFiddle 来显示这个问题吗？

查看此链接sachinchoolur.github.io/lightslider/examples.html

好的，你能详细解释一下你希望它做什么吗？

【参考方案1】：

您最大的问题是插件绑定到寻呼机控件的函数以 return false; 结尾，这可以防止此事件进一步冒泡，因此在此之后绑定到元素的其他函数不会被调用.

$pager.on('click', function() 
  if (settings.loop === true && settings.mode === 'slide') 
    scene = scene + ($pager.index(this) -

      $cSouter.find('.lSPager').find('li.active').index());
   else 
    scene = $pager.index(this);
  
  $el.mode(false);
  if (settings.gallery === true) 
    $this.slideThumb();
  
  clearInterval(interval);
  return false; // this line prevents any further bubbling for this event so not other functions that are bound to the element after this are going to get called
);

---

恕我直言，最简单的解决方法是修改插件以添加一个回调函数，如onBeforePageChange，这将允许您执行以下操作：

$('#responsive').lightSlider(
        item:4,
        loop:false,
        slideMove:2,
        easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
        speed:600,
        responsive : [
            
                breakpoint:800,
                settings: 
                    item:3,
                    slideMove:1,
                    slideMargin:6,
                  
            ,
            
                breakpoint:480,
                settings: 
                    item:2,
                    slideMove:1
                  
            
        ],
        onBeforePageChange: function ()  // this is a custom callback we have added
            console.log('onBeforePrevSlide called'); // do what ever you want here, like play the slider after a delay
        
    ); 

这是一个working jsFiddle，插件代码中添加了回调