क्या एक पृष्ठ पर कई ट्विटर बूटस्ट्रैप कैरोसेल होना संभव है?

ट्विटर बूटस्ट्रैप संस्करण: 2.0.3क्या एक पृष्ठ पर कई ट्विटर बूटस्ट्रैप कैरोसेल होना संभव है?

उदाहरण एचटीएमएल कोड:

<!DOCTYPE html> 
<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" /> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.carousel').each(function(){ 
     $(this).carousel({ 
      pause: true, 
      interval: false 
     }); 
    }); 
}); 
</script> 
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script> 
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script> 
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script> 
</head> 
<body> 
<div id="carousel-1" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

<div id="carousel-2" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 
</body> 
</html>

उदाहरण सीएसएस:bootstrap.css

समस्या: दो के लिए बूटस्ट्रैप carousels एक पर काम करने के पेज, मूल रूप से, मुझे अपने div कंटेनर के लिए दो अलग-अलग आईडी सेट करने की आवश्यकता है (#carousel-1 और #carousel-2)। लेकिन मैंने देखा है कि जब तक मैं #myCarousel का उपयोग div कंटेनर की आईडी के रूप में नहीं करता तब तक carousels काम नहीं करते हैं।

उस स्थिति में, मेरे पास एक ही पृष्ठ पर एकाधिक कैरोलल्स कैसे हो सकते हैं?

स्रोत

2012-05-09 its_me

आपके कैरोसेल एनएवी लिंक में href को उस कैरोसेल के आईडी मान से मेल खाने के लिए बदलें जिसे आप नियंत्रित कर रहे हैं। वह href मान यह है कि बूटस्ट्रैप कैसे निर्धारित करता है कि स्लाइड करना है। तो आप निम्नलिखित बदलने के लिए की आवश्यकता होगी:

<a class="carousel-control left" href="#carousel-1" data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#carousel-1" data-slide="next">&rsaquo;</a>

और दूसरा हिंडोला के लिए:

<a class="carousel-control left" href="#carousel-2" data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#carousel-2" data-slide="next">&rsaquo;</a>

स्रोत

2012-05-09 18:16:31 dgabriel

आप एक पृष्ठ में कई कैरोलस चल रहे हैं, आपको बस उन्हें उचित रूप से कॉल करना है। उदाहरण के लिए, इस उदाहरण मैं एक और सवाल मैं पोस्ट पर लिखा ले:

http://jsfiddle.net/andresilich/S2rnm/

मैं तीन carousels एक ही समय में चल रहा है, अपने स्वयं के अद्वितीय आईडी से प्रत्येक की है। वे इतने की तरह एक विशेषता चयनकर्ता का उपयोग करके बुलाया जा रहा है कर रहे हैं:

$('[id^="myCarousel"]').carousel();

इसलिए प्रत्येक हिंडोला एक आईडी कि #myCarousel की आईडी और फिर उन्हें अलग सेट करने के लिए एक संख्या के साथ वास्तव में शुरू होता है है।

लेकिन तुम भी एक ही लाइन पर प्रत्येक हिंडोला, उदाहरण के लिए के लिए एक उदाहरण परिभाषित कर सकते हैं: (। गौर करें कि प्रत्येक चयनकर्ता अल्पविराम से अलग है)

$('#myCarousel1, #myCarousel2, #differentCarousel3').carousel();

और यह रूप में अच्छी तरह है, तो सिर्फ काम करेंगे सुनिश्चित करें कि आप अपने कैरोसेल के प्रत्येक उदाहरण के लिए एक वैध चयनकर्ता का उपयोग करें।

स्रोत

2012-05-09 18:16:15

अनेक आईडी का उपयोग कर के लिए महान टिप। –

क्या उन्हें ग्रिड में प्रदर्शित करना संभव है? एक दूसरे के शीर्ष पर ढेर के बजाय? – caffeinescript

उत्कृष्ट समाधान, मेरे लिए काम किया। – Pupil

क्या एक पृष्ठ पर कई ट्विटर बूटस्ट्रैप कैरोसेल होना संभव है?

उत्तर

संबंधित मुद्दे