Slick滑块中为nextArrow配置多个元素的实现问题

Slick滑块的nextArrow参数只接受单个元素（jQuery对象、DOM元素或HTML字符串），不支持直接传入多个元素。你用&&或||属于JavaScript逻辑运算，最终只会返回其中一个元素：

• $('.button-next') && $('.button-right')：因为jQuery对象即使匹配不到元素也是真值，所以最终返回的是$('.button-right')，只有这个按钮会生效。
• 如果用||，则会返回第一个真值的jQuery对象，也就是$('.button-next')，同样只有单个按钮生效。

方法1：手动给两个按钮绑定点击事件 #

初始化Slick时隐藏默认箭头，然后给两个按钮单独绑定触发滑块切换的事件：

// 初始化滑块，禁用默认next箭头
$('.slick-container').slick({
  infinite: false,
  edgeFriction: 0,
  prevArrow: false,
  nextArrow: false, // 禁用默认箭头
  dots: true,
  customPaging : function() {
    return '<span class="slick-dot"></span>'
  }
});

// 给两个按钮绑定next事件
$('.button-next, .button-right').on('click', function() {
  $('.slick-container').slick('slickNext');
});

方法2：自定义包含两个按钮的箭头模板 #

如果希望箭头属于滑块的默认控件结构，可以自定义nextArrow的HTML，把两个按钮放在里面，初始化后再给按钮绑定事件：

$('.slick-container').slick({
  infinite: false,
  edgeFriction: 0,
  prevArrow: false,
  nextArrow: '<div class="custom-next-buttons"><button class="button-next">Next</button><button class="button-right">Right</button></div>',
  dots: true,
  customPaging : function() {
    return '<span class="slick-dot"></span>'
  }
});

// 给自定义容器内的两个按钮绑定事件
$('.custom-next-buttons .button-next, .custom-next-buttons .button-right').on('click', function(e) {
  e.preventDefault();
  $('.slick-container').slick('slickNext');
});

内容的提问来源于stack exchange，提问作者Marcus Stridfält