Twitter Bootstrap Karussell - Zugriff aktuellen Index

Question

Wie bekomme ich den aktuellen Index aus dem Karussell?

In diesem Fall verwende ich eine ungeordnete Liste. Ich weiß, dass ich die Listenelemente durchsuchen kann, um den mit der "aktiven" CSS-Klasse zu finden, aber ich möchte wissen, ob ich das Karussellobjekt direkt fragen kann.

Zusätzlich: es wäre auch praktisch, auf den Zielindex zugreifen zu können (auf 'slide' Ereignis). Auch hier kann ich dies mit unserer Suchmaschine tun:

var idx = $('.carousel-inner li.active').index(); 

... und dann auf Richtung Subtrahieren Hinzufügen/basiert, aber ich etwas sauberer bin der Hoffnung.

Answer 1

Nein, es gibt keine Möglichkeit, auf Index oder Richtung zuzugreifen.

See here

// EDIT

Bootstrap geändert repos, neue link

Answer 2

Ich bin es so zu tun, die Art sehr gut funktioniert;)

var slider = $("#slider-wrapper") 
    .carousel({ 
     interval: 4000 
    }) 
    .bind('slid', function() { 
     var index = $(this).find(".active").index(); 
     $(this).find("a").removeClass('pager-active').eq(index).addClass('pager-active'); 
    }); 

$("#slider-wrapper a").click(function(e){ 
    var index = $(this).index(); 
    slider.carousel(index); 
    e.preventDefault(); 
}); 

Answer 3

Statt von der aktuellen Folie hinzufügen und subtrahieren, versuchen Sie dies auf dem 'Folie' Ereignis:

$('.carousel').on('slide',function(e){ 
    var slideFrom = $(this).find('.active').index(); 
    var slideTo = $(e.relatedTarget).index(); 
    console.log(slideFrom+' => '+slideTo); 
}); 

Answer 4

Folgendes habe ich nach dem Lesen von fats Kommentar in @Quelltextfabriks Antwort.

var carousel = $("#myCarousel"); 

carousel.on("slid", function() { 
    var all = carousel.find('.item'), 
     active = carousel.find('.active'), 
     slidTo = all.index(active); 

    console.log("Slid - Slid To: " + slidTo); 
    }); 

carousel.on("slide", function() { 
    var all = carousel.find('.item'), 
     active = carousel.find('.active'), 
     slidFrom = all.index(active); 

    console.log("Slide - Slid From: " + slidFrom); 
}); 

Answer 5

$(".active", e.target).index() funktioniert. Wobei e von:

karussell.ein ("slid", Funktion (e) { $ (". Active", e.target) .index(); });

auf Gefunden: https://github.com/twitter/bootstrap/pull/2404#issuecomment-4589229

Answer 6

Das ist für mich gearbeitet (Bootstrap 3)

$("#myCarousel").on('slide.bs.carousel', function(evt) { 
    console.debug("slide transition started") 
    console.debug('current slide = ', $(this).find('.active').index()) 
    console.debug('next slide = ', $(evt.relatedTarget).index()) 
}) 

Answer 7

Für Bootstrap 3 es

ist

$('#myCarousel').on('slide.bs.carousel', function (e) { 
    var active = $(e.target).find('.carousel-inner > .item.active'); 
    var from = active.index(); 
    var next = $(e.relatedTarget); 
    var to = next.index(); 
    console.log(from + ' => ' + to); 
}) 

von https://github.com/twbs/bootstrap/pull/2404#issuecomment-22362366

Answer 8

Bootstrap 4 hat schließlich die native Umsetzung dieser.

direction: The direction in which the carousel is sliding (either "left" or "right"). 
relatedTarget: The DOM element that is being slid into place as the active item. 
from: The index of the current item 
to: The index of the next item 

https://github.com/twbs/bootstrap/pull/21668

$('#myCarousel').on('slide.bs.carousel', function (e) { 
    // current index 
    e.from 
    // next index 
    e.to 
}