ट्विटर बूटस्ट्रैप हिंडोला: स्लाइड की दिशा

Question

मैं कैसे लगा सकते हैं कि हिंडोला बाएं या दाएं फिसलने है मिल सकता है? मैंने घटनाओं के स्लिप और स्लाइड के लिए प्रलेखन को देखा है, लेकिन न ही स्लाइड की दिशा पर कोई प्रासंगिक जानकारी प्रदान करते हैं।

मैं भी घटना वस्तु गिरावट घटना के लिए ईवेंट हैंडलर के लिए पारित हो जाता है कि जांच की है, लेकिन मैं या तो किसी भी उपयोगी सुराग खोजने के लिए वहाँ नहीं कर पा रहे।

किसी भी मदद की सराहना की जाएगी!

Answer 1

तो जहाँ तक मैं देख सकते हैं चहचहाना बूटस्ट्रैप का खुलासा नहीं करता क्या दिशा हिंडोला घटना वस्तु के माध्यम से चल रहा है। हालांकि, यह स्लाइड में शामिल तत्वों के लिए "दाएं" या "बाएं" वर्ग जोड़ता है।

तो मूल रूप से मैं 2 विकल्प देखें। ईवेंट ऑब्जेक्ट में दिशा का पर्दाफाश करें या तत्वों पर दाएं या बाएं वर्ग की तलाश करें।

विकल्प 1:

आप बूटस्ट्रैप हिंडोला कोड को संशोधित करना होगा।

e = $.Event('slide') 

e = $.Event('slide', {direction: direction}) 

(bootstrap.js के सामान्य संस्करण में लाइन 337-340 के आसपास)

के लिए और फिर आप के साथ दिशा प्राप्त कर सकते हैं: हिंडोला में, समारोह परिवर्तन स्लाइड कुछ इस तरह:

var $carousel = $('.carousel'); 
$carousel.carousel(); 

$carousel.bind('slide', function(e) { 
    console.log("e.direction = " + e.direction); 
}); 

या Option2:

सीएसएस "छोड़" या "सही" वर्ग के लिए कुछ समय के तत्व में जोड़े जाने की प्रतीक्षा करें और फिर जाँच करता है, तो उस वर्ग मौजूद है।

var $carousel = $('.carousel'); 
$carousel.carousel(); 

$carousel.bind('slide', function(e) { 

    setTimeout(function(){ 
    var left = $carousel.find('.item.active.left'); 
    var right = $carousel.find('.item.active.right'); 
    if(left.length > 0) { 
     console.log('left'); 
    } 
    else if(right.length > 0) { 
     console.log('right'); 
    } 
    }, 500); 
}); 

टाइमआउट की आवश्यकता है क्योंकि ईवेंट ट्रिगर होने पर और बाएं दाएं वर्ग सेट होने पर दौड़ की स्थिति होती है। जाहिर है यह एक हैकर समाधान है, लेकिन आपको बूटस्ट्रैप कोड को संशोधित करने की आवश्यकता नहीं है। शायद अन्य विकल्प भी हैं, लेकिन मुझे लगता है कि विकल्प 1 सबसे अच्छा है।

संपादित करें: बूटस्ट्रैप सीएसएस (2.1.1) के नवीनतम संस्करण में विकल्प 1 के लिए लाइन परिवर्तन होगा:

(लाइन 340) से:

, e = $.Event('slide', { 
    relatedTarget: $next[0] 
}) 

रहे हैं:

, e = $.Event('slide', { 
    relatedTarget: $next[0], 
    direction: direction 
}); 

Answer 2

3.0.0-आरसी 1 के रूप में, निम्नलिखित तत्व सक्रिय तत्व, अगले तत्व, सूचकांक से सूचकांक, और स्लाइड दिशा तक पहुंचने के लिए काम करता है। आवश्यकता के अनुरूप अपने चयनकर्ताओं की विशिष्टता को कम करने के लिए स्वतंत्र महसूस।

carousel.on('slide.bs.carousel', function (event) { 

    var active = $(event.target).find('.carousel-inner > .item.active'); 
    var from = active.index(); 
    var next = $(event.relatedTarget); 
    var to = next.index(); 
    var direction = event.direction; 

}); 

Answer 3

चहचहाना बूटस्ट्रैप 3 के लिए:

$('#myCarousel').on('slide.bs.carousel', function (event) { 
    alert(event.direction); 
});