bxslider在特定幻灯片上加载jQuery

Question

我安装了BXSlider（https://bxslider.com/）。现在我希望在输入“幻灯片”时运行以下jQuery脚本。

$(document).ready(function () {
  $(".next-prev-nav").fadeTo( "slow", 1 );
  $(".disable-slide-nav").hide();
});

（该脚本可以再次导航滑块。）

我试图搜索BXslider的网站，但我找不到任何关于它的信息。

希望有人可以帮助我。

Answer 1

您正在寻找onSlideBefore （在每次幻灯片转换之前立即执行）或onSlideAfter （每次幻灯片转换后立即执行 - 转换完成时）< / em>根据您的需求，可以找到here - 查看Callbacks部分。

以下是一个例子：

$(function(){
  var slider = $('.bxslider').bxSlider({
    mode: 'horizontal',
    captions: true,
    slideWidth: 600,
    auto: true,
    pause: 1000,
    onSlideBefore: function () {
      console.log('onSlideBefore');
      // Your code either goes here or...
    },
    onSlideAfter: function () {
      console.log('onSlideAfter');
      // Goes here...
      // For example lets turn the slider off after the second slide appears
      slider.stopAuto();
    }
  });
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>

<div class="bxslider">
  <div><img src="https://bxslider.com/assets/images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="https://bxslider.com/assets/images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="https://bxslider.com/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>