slick slider - Synchronisation automatische Wiedergabe und aktiver navigation

Ich versuche, mit den slick Slider erstellen Sie einen Schieberegler, der es einem Benutzer ermöglicht, wählen Sie den Titel der Sektion und finden Sie die Folie, für die es aber auch die Möglichkeit geben, für die es auf autoplay.

Das Zeug funktioniert. Aber ich brauche eine Art und Weise zu entsprechen, in die es so machen, dass, wenn es autoplay, es entspricht der aktiven navigation und ändert es die Farbe.

Jetzt nur eine neue Farbe für die aktive Folie ein Titel, wenn ein Benutzer darauf klicken. Ich will es tun, so auf autoplay auch

wie soll ich das tun??

Hier ist der code den ich habe funktioniert jetzt

Js Bin

Das einzige, was ich geändert habe ist, dass die option automatische Wiedergabe, die existiert nicht auf der demo von slick slider

 $('.slider-for').slick({
 slidesToShow: 1,
 slidesToScroll: 1,
 arrows: false,
 fade: true,
 asNavFor: '.slider-nav',
 autoplay:true

  });
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});

InformationsquelleAutor new_frontenddev | 2014-12-02

  1. 4

    http://jsfiddle.net/bpbaz10L/

    $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,        
    autoplay:true,
    //trigger after the slide appears
    //i is current slide index
    onAfterChange:function(slickSlider,i){
         //remove all active class
         $('.slider-nav .slick-slide').removeClass('slick-active');
         //set active class for current slide
         $('.slider-nav .slick-slide').eq(i).addClass('slick-active');         
     }

});


//set active class to first slide
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');
    Das hat Super geklappt.. danke. Wenn Sie Zeit haben, würden Sie in der Lage sein, zu erklären, was die Rolle von i und eq. ? Nur so kann ich lernen, es effizient zu nutzen in der Zukunft
    onAfterChange return i - der index der aktuellen Folie. Für den eq finden Sie unter diesem link. "Reduzieren Sie die Menge der übereinstimmenden Elemente an der angegebenen Indexposition." Wenn er findet heraus, dass der aktuelle index , dann wissen wir, dass die Folie in der navigation sollte auf aktiv gesetzt
    Für jemand anderen zu stoßen, die in dieser Ausgabe + wütend googeln nach einer Lösung + Fragen, warum onAfterChange funktioniert nicht: siehe github.com/kenwheeler/slick#events onAfterChange-Rückruf ist jetzt schon veraltet, zu Gunsten der afterChange Veranstaltung.
    Coole Lösung. Aber mit autoplay aktiviert die active-Klasse ändert sich nicht auf dem nav-element. Ist das irgendwie möglich zu machen, dieses arbeiten mit dem Autospiel als auch?

    InformationsquelleAutor dm4web

  2. 0

    den dm4web Antwort ist perfekt, wenn Sie zeigen, sind alle Folien, die Sie in Ihrem nav-regler. Wenn Sie weitere Folien, die ausgeblendet sind (sagen, Sie haben 12 Dias, aber nur 8 in Ihrem nav auf einmal), Sie können tun, etwas ähnliches, wie

    $('.slider-nav').on('afterChange', function(){

  $('.slider-nav .slick-slide').removeClass('current');
  $('.slider-nav .slick-active:first').addClass('current');
});

//set active class to first slide
$('.slider-nav .slick-active:first').addClass('current');

    InformationsquelleAutor mlaroy

  3. 0
    function _Slider(){
        $('#hm-slider ul').slick({
            dots: false,
            infinite: true,
            arrows:false,
            autoplay: true,
            autoplaySpeed: 5000,
            fade: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            asNavFor: '#slider-dots',
        }); 
        $('#slider-dots').slick({
            slidesToShow: 5,
            slidesToScroll: 1,
            asNavFor: '#hm-slider ul',
            dots: false,
            centerMode: false,
            focusOnSelect: true,
            variableWidth: true,
            centerMode: true,
            useCSS:true
        });

        //set active class to first slide
        $('#slider-dots .slick-slide').removeClass('slick-active');
        $('#slider-dots .slick-slide').eq(0).addClass('slick-active');
        $('#hm-slider ul').on({
            beforeChange: function(event, slick, current_slide_index, next_slide_index) {
                //remove all active class
                $('#slider-dots .slick-slide').removeClass('slick-active');
                //set active class for current slide
                $('#slider-dots .slick-slide[data-slick-index='+next_slide_index+']').addClass('slick-active');
            }
        });

    }

    InformationsquelleAutor Dishan TD

Schreibe einen Kommentar