bxslider在特定幻灯片上加载jQuery

Question

I have BXSlider ( https://bxslider.com/ ) installed. Now I want the following jQuery script to run on entering a "slide".

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

(The script enables the navigation of the slider again.)

I tried to search the website of BXslider, but I couldn't find anything about it.

Hope someone can help me out.

Answer 1

You are looking for either onSlideBefore (executes immediately before each slide transition) or onSlideAfter (executes immediately after each slide transition - when transition completes) depending on your needs both can be found here - look at the section Callbacks .

Here is an example:

 $(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>