Question

您好我正在使用jQuery进行自定义导航，但我无法弄清楚如何检测活动幻灯片并将活动状态应用于该幻灯片的按钮。

我设置了一个jsfiddle以更好地展示我正在尝试做的事情，基本上与滑块中的点/寻呼机功能相同，但是在按钮1 2和3上。

我是jQuery的.data部分的新手：P

http://jsfiddle.net/unknown601/yxErC/17/

<div class="number" id="" data-slider="0">
  Button 1
</div>
<div class="number" id="" data-slider="1">
  Button 2
</div>
<div class="number" id="" data-slider="2">
  Button 3
</div>

<ul class="slider">
  <li data-current="1">
    <img src="http://placehold.it/350x150">
    <p>Slider-1</p>
  </li>

  <li data-current="2">
    <img src="http://placehold.it/350x150">
    <p>Slide 2</p>
  </li>

  <li data-current="3">
    <img src="http://placehold.it/350x150">
    <p> Slide 3</p>
  </li>

</ul>



   #current {
  color: red;
  font-weight: bold;
}

.number:hover {
  color: blue;
  cursor: pointer;
}

有按钮来控制滑块：）

var Slider;

$(document).ready(function() {
  Slider = $('.slider').bxSlider({
    pager: true
  });
  $('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');
    Slider.goToSlide(index);
  });
});

Answer 1

<强> Working fiddle

您可以为单击的按钮添加类，并将其从点击事件中的其他按钮中删除：

$('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');

    $('.number').removeClass('active'); //Remove class active from all buttons
    $(this).addClass('active'); //Add active class to the clicked one

    Slider.goToSlide(index);
});

由于您尝试让按钮处于与幻灯片相关的活动状态，因此您可以使用onSlideBefore()回调基于add/remove的{{1}}活动课程按钮：

data-slider

这会有所帮助。

Answer 2

您要自定义“上一页/下一页”按钮吗？如果是这样，您可以通过调用getCurrentSlide()获取当前（“有效”）页面。有关详细信息，请查看http://bxslider.com/option上的文档。如果你只想在幻灯片之外进行导航控制，bxslider页面上有一个例子：http://bxslider.com/examples/custom-next-prev-selectors

Answer 3

尝试：

var Slider;
var minState = 0;
var maxState = 2;
var currState = 0;

$(document).ready(function() {
  Slider = $('.slider').bxSlider({
    pager: true
  });

  var changeActiveLink = function() {
    $('.active').removeClass('active');
    $('.number[data-slider='+currState+']').addClass('active');
  }
  $('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');
    Slider.goToSlide(index);
    currState = index;
    changeActiveLink();
  });
  $('.bx-pager-link').on('click', function(e){
    e.preventDefault();
    var activeButton = $(this).data('slide-index');
    currState = activeButton;
    changeActiveLink();
  });
  $('.bx-next').on('click', function(e){
    e.preventDefault();
    if(currState == maxState) {
        currState = 0;
    } else {
        currState++;
    }
    changeActiveLink();
  });
  $('.bx-prev').on('click', function(e){
    e.preventDefault();
    if(currState == 0) {
        currState = maxState;
    } else {
        currState--;
    }
    changeActiveLink();
  })

});

http://jsfiddle.net/yxErC/32/

使用jQuery Data检测活动幻灯片和运行功能

3 个答案: