如何使标签跟随 bxslider 寻呼机？

Question

我的网站上有一个使用 bxslider 的主要功能，我的 Html 制作如下：

    <ul class="bxslider">
    <li class="slide_one">
        <h1>Quality Comes First</h1>
        <p><a href="/products">Products <img src="/images/arrow-right.png" alt=""/></a></p>
    </li>
    <li class="slide_two">
        <h1>uk market leaders</h1>
        <p><a href="/process">Processes <img src="/images/arrow-right.png" alt=""/></a></p>
    </li>
    <li class="slide_three">
        <h1>100% MADE IN THE UK</h1>
        <p><a href="/services">Quality Services <img src="/images/arrow-right.png" alt=""/></a></p>
    </li>
</ul>

<div class="sub_nav">
    <div class="row">
        <ul id="bx-pager">
            <li class="four columns"><a index="0" href="#" >Products</a></li>
            <li class="four columns"><a index="1" href="#" >Processes</a></li>
            <li class="four columns"><a index="2" href="#" >Quality Services</a></li>
        </ul>
    </div>
</div>

因此，我有包含每个滑块内容和图像的主 bxslider 区域，然后我创建了一个选项卡 (sub_nav)，我希望这些选项卡在其下方跟随主 bxslider 寻呼机的活动状态。

我的js如下：

<script>
var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
if(!oldieCheck) {
document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');

} else {
document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
}
</script>

$(this).ready(function() {
var slider;
slider=$('.bxslider').bxSlider({
auto: true,
mode: 'fade',

onSlideAfter: function($slideElement, oldIndex, newIndex){
    $(this).addClass('onstate');
}
});

    $(".sub_nav li a").click(function(e) {
        e.preventDefault();
        var index = $(this).attr('index');
        slider.goToSlide(parseInt(index));
        $(".sub_nav li a").removeClass('onstate');
        $(this).addClass('onstate');
    });
})

Answer 1

这是对我有用的代码。

请注意，要在您的代码中使用 'slider' var，我会在设置 bxslider 时首先对其进行初始化。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(this).ready(function()
  {
  
     var slider;
  
 slider=$('.bxslider').bxSlider({
    auto: true,
    mode: 'fade',
      
      onSlideAfter: function($slideElement, oldIndex, newIndex){
         //Chaange Tabs here
      }
  });
  
  
  
  
     $(".sub_nav li a").click(function(e) {
  e.preventDefault();
  var index = $(this).attr('index');
  slider.goToSlide(parseInt(index));
  $(".sub_nav li a").removeClass('onstate');
  $(this).addClass('onstate');
 });
  
  
  
  })

如何使标签跟随 bxslider 寻呼机？

How to make tabs follow bxslider pager?

html

jquery

bxslider