bxslider laden jQuery auf spezifische Folie

Question

Ich habe BXSlider (https://bxslider.com/) installiert. Jetzt möchte ich, dass das folgende jQuery-Skript beim Eingeben einer "Folie" ausgeführt wird.

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

(Das Skript ermöglicht die Navigation des Schiebers wieder.)

Ich habe versucht, die Website von BXslider zu suchen, aber ich kann nichts darüber finden.

Hoffe jemand kann mir helfen.

Answer 1

Sie suchen entweder onSlideBefore(führt unmittelbar vor jedem Diawechsel) oder onSlideAfter(führt unmittelbar nach jedem Diawechsel - wenn Übergang abgeschlossen) je nach Bedarf sowohl here gefunden werden - siehe den Abschnitt Callbacks. Hier

ein Beispiel:

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