Carousel indikator aktiv schalten

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
und mal wieder ein Problem mit dem Bootstrap Carousel.
Ich habe die controls ausserhalb des Sliders positioniert und muss nun diese aktiv schalten.
Das funktioniert soweit auch. Aber wenn ich von Hand einen Slide auswähle dann wird immer die zahl links davon aktiv geschaltet.
Ich denke mal das liegt an dem .next() aber ich weiß nicht wie ich dass so anpassen kann das sich die beiden Functionen nicht in die Quere kommen?

http://jsbin.com/tayece/edit?html,css,js,output

Viele Grüße
 
Hi,

das Aktivsetzen wird zweimal angestossen, wenn das Click-Event benutzt wird. Als erstes wird wie gewünscht, die Klasse im Click-Handler gesetzt. Anschliessend feuert jedoch nochmal das Event slide.bs.carousel, wodurch das folgende Element aktiv gesetzt wird.

Als Lösung könntest du im Click-Handler das dem aktuell geklickten Element vorausgehende Element aktiv machen. Damit würde im slide.bs.carousel Event das richtige Element gewählt werden.

Z.B.
Javascript:
$(function() {
    var carouselSelector = $('.carousel'),
        holder = $('.controls .indicators'),
        li = holder.children('li'),

        setActive = function(active) {
            li.removeClass('active');
            active.addClass('active');
        };

    carouselSelector.on('slide.bs.carousel', function(e) {
        var active, next;

        active = holder.children('li.active');
        next = active.next('li').length ? active.next('li') : holder.find('li:first');

        next.addClass('active');

        setActive(next);
    });

    $('.indicators li button').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();

        var active, next;

        // aktives Listenelement ermitteln
        active = $(e.target).closest('li');

        // falls das aktive Element nicht erneut gedrueckt wird
        if (!active.hasClass('active')) {
            // das vorhergehende als aktiv markieren (notwendig, da durch das Event slide.bs.carousel das Aktivsetzen zweimal angestossen wird)
            next = active.prev('li').length ? active.prev('li') : holder.find('li:last-child');

            setActive(next);
            carouselSelector.carousel($(this).parent('li').data('slideTo'));
        }

    });
});

Ciao
Quaese
 
Zuletzt bearbeitet:
Hi,
nachdem ich die Klassen etwas angepasst hab funktioniert es jetzt.
Nun muss ich noch das prev zum funktionieren bekommen. Die buttons dafür waren jetzt in meinem jsbin nicht mit drinnen.

Grüße
 
Hallo Quaese,
hast du zufällig eine Idee wie man das auch mit prev und next button hinbekommt. Die Aktivschaltung mit Next funktioniert ja durch das slide.bs.carousel.
Aber für prev, also das man auch rückwärts durch die Slideshow gehen kann da funktioniert das active nicht bzw. setzt wieder den nächsten Indikator aktiv.
Dadurch kommt dann die ganze Slideshow durcheinander.

EDIT:

So ich habe das selbe Problem bei einem anderen Einsatz des Sliders nochmal gehabt und habe nun einen Weg gefunden das ganze vernünftig lauffähig zu haben:

Javascript:
//Set outside Carousel-Indicators active
    $('.fsCarousel.carousel-indicators > li > button').click(function() {
   
        // grab href, remove pound sign, convert to number
        var item = Number($(this).parent().attr('data-slide-to'));
   
        // slide to number -1 (account for zero indexing)
        $('#fsCarousel').carousel(item);
   
        // remove current active class
        $('.carousel-indicators .active').removeClass('active');
   
        // add active class to just clicked on item
        $(this).parent().addClass('active');
   
        // don't follow the link
        return false;
    });
   
    $('.fsCarouselContainer .carousel-control.left').click(function() {
          var active = $('fsCarouselContainer .carousel-indicators').find('.active'),
              next = active.next('li');
         
          active.removeClass('active');
          next.addClass('active');
         
    });

   
    // Autoplay active
   
    carouselSelector.on('slid.bs.carousel', function(e) {
    
        // remove active class
        $('.carousel-indicators .active').removeClass('active');
   
        // get index of currently active item
        var idx = $('#fsCarousel .item.active').index();
   
        // select currently active item and add active class
        $('.carousel-indicators li:eq(' + idx + ')').addClass('active');       
    });


Viele Grüße
 
Zuletzt bearbeitet:
Zurück