如何为Unslider添加自定义onClick函数以切换至下一张幻灯片？

嘿，刚看到你的问题啦，作为JS新手踩这种语法坑太正常了～你的原代码主要是缺少事件绑定的目标元素，而且调用unslider('next')时没有明确指定操作哪个滑块实例，导致语法错误。我给你修正一下：

修正后的完整代码 #

HTML部分（保持你的结构即可） #

<div class="my-slider">
  <ul>
    <li><img class="img-pad" src="img/img-1.jpg" alt=""></li>
    <li><img class="img-pad" src="img/img-2.jpg" alt=""></li>
    <!-- 更多幻灯片项 -->
  </ul>
</div>

JavaScript部分 #

jQuery(document).ready(function($) {
  // 初始化Unslider，同时把滑块实例存起来
  const mySlider = $('.my-slider').unslider({ 
    arrows: false  // 隐藏默认箭头
  });

  // 给整个滑块容器绑定点击事件，点击时切换到下一张
  $('.my-slider').on('click', function() {
    mySlider.unslider('next');
  });
});

或者你也可以用链式调用的写法，更简洁：

jQuery(document).ready(function($) {
  $('.my-slider')
    .unslider({ arrows: false })
    .on('click', function() {
      // 用$(this)指代当前被点击的滑块容器，调用next方法
      $(this).unslider('next');
    });
});

额外小提示 #

如果你不想点击滑块的空白区域也触发切换，只想点击图片时才切换，只需要把事件绑定的选择器改成.my-slider img就行：

$('.my-slider img').on('click', function() {
  $(this).closest('.my-slider').unslider('next');
});

这样就完美实现点击幻灯片切换到下一张的功能啦～

内容的提问来源于stack exchange，提问作者NiceShoes