Question

我使用了unslider图片滑块https://github.com/idiot/unslider

我想在页面中添加第二个滑块。问题是导航.arrows类对于slider__1和slider__2都是相同的。

我的问题是如何添加第二个滑块？

谢谢。

＆＃13;

$(function() {
  $('.slider__1, .slider__2').unslider({
    autoplay: false,
    keys: false,
    dots: false
  });

});

var unslider = $('.slider__1').unslider();
$('.arrows').click(function() {
  var fn = this.className.split(' ')[1];
  unslider.data('unslider')[fn]();
});

＆＃13;

Answer 1

尝试以下方法：

1）为每组箭头添加单独的类，如下所示：

对于滑块1：

<a href="#" class="arrows prev unslider1">Previous slide</a>
<a href="#" class="arrows next unslider1">Next slide</a>

对于滑块2：

<a href="#" class="arrows prev unslider2">Previous slide</a>
<a href="#" class="arrows next unslider2">Next slide</a>

然后在内部点击事件;抓住滑块参考：

var unslider1 = $('.slider__1').unslider();
var unslider2 = $('.slider__2').unslider();
$('.arrows').click(function() {
  var fn = this.className.split(' ')[1];
  var sliderRef = this.className.split(' ')[2];
  var unslider = null;
  if(sliderRef  == "unslider1")
      unslider = unslider1 ;
  else
      unslider = unslider2 ;

  unslider.data('unslider')[fn]();
});

希望，这会对你有帮助。

向页面添加多个滑块

1 个答案: