ट्विटर बूटस्ट्रैप कैरोसेल - वर्तमान सूचकांक का उपयोग

Question

मैं कैरोसेल से वर्तमान सूचकांक कैसे प्राप्त करूं?

इस मामले में मैं एक अनियमित सूची का उपयोग कर रहा हूं। मुझे पता है कि मैं 'सक्रिय' सीएसएस वर्ग के साथ एक को खोजने के लिए सूची आइटमों के माध्यम से खोज सकता हूं, लेकिन मैं जानना चाहता हूं कि मैं सीधे कैरोसेल ऑब्जेक्ट से पूछ सकता हूं या नहीं।

अतिरिक्त: लक्ष्य सूचकांक ('स्लाइड' ईवेंट पर) तक पहुंचने में सक्षम होने के लिए भी आसान होगा। फिर से, मैं के साथ खोज कर ऐसा कर सकते हैं:

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

... और फिर जोड़ने/दिशा के आधार पर घटाकर, लेकिन मैं कुछ क्लीनर के लिए उम्मीद कर रहा हूँ।

Answer 1

नहीं, सूचकांक या दिशा तक पहुंचने का कोई तरीका नहीं है।

See here

// संपादित

बूटस्ट्रैप रेपोस, नई link

Answer 2

मुझे लगता है कि बहुत अच्छी तरह से एक तरह से काम करता है, इस तरह यह कर रहा हूँ बदल दिया;)

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

इसके बजाय वर्तमान स्लाइड से जोड़ने और घटाने के लिए, इसे 'स्लाइड' ईवेंट पर आज़माएं:

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

Answer 4

@ Quelltextfabrik के उत्तर में वसा की टिप्पणी पढ़ने के बाद मैं यहां आया था।

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() काम करता है। कहां से:

carousel.on ("स्लीड", फ़ंक्शन (ई) { $ ("सक्रिय", e.target) .index(); });

पर मिला: (बूटस्ट्रैप 3) https://github.com/twitter/bootstrap/pull/2404#issuecomment-4589229

Answer 6

यह मेरे लिए काम किया

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

बूटस्ट्रैप 3 के लिए यह https://github.com/twbs/bootstrap/pull/2404#issuecomment-22362366

Answer 8

से

$('#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); 
}) 

है बूटस्ट्रैप 4 अंत में देशी है इसका कार्यान्वयन

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 
}