向页面添加多个滑块

I'm using unslider image slider https://github.com/idiot/unslider

我正在使用unslider图像滑块https://github.com/idiot/unslider

I want to add a second slider to the page. The problem is that navigation .arrows class is the same for both slider__1 and slider__2.

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

And my question is how to add a second slider?

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

Thank You.

$(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]();
});

1 个解决方案

#1

Try with following approach:

尝试以下方法:

1) Add separate class for each set of arrow like follows:

1)为每组箭头添加单独的类,如下所示:

For slider 1:

对于滑块1:

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

For slider 2:

对于滑块2:

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

Then inside click event; grab the slider reference as:

然后在里面点击事件;抓住滑块引用为:

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]();
});

Hope, this will help you.

希望对你有帮助。

#1