Czy na jednej stronie można umieścić wiele karuzeli Bootstrap na Twitterze?

Twitter Bootstrap Wersja: 2.0.3Czy na jednej stronie można umieścić wiele karuzeli Bootstrap na Twitterze?

Przykład HTML kod:

<!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>

Przykład CSS:bootstrap.css

Problem: Dla dwie karuzele bootstrap do pracy na strona, w zasadzie, muszę ustawić dwa różne identyfikatory dla ich pojemników div (#carousel-1 i #carousel-2). Zauważyłem jednak, że karuzele nie działają, dopóki nie użyję #myCarousel jako identyfikatora kontenera div.

W takim przypadku, w jaki sposób mogę mieć wiele karuzel na jednej stronie?

Źródło

2012-05-09 its_me

Zmień href w swoich linkach nawigacyjnych, aby dopasować wartość identyfikatora karuzeli, którą kontrolujesz. Ta wartość href określa, w jaki sposób bootstrap określa, które slajdy mają zostać przesunięte. Więc trzeba będzie zmienić następujące:

<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 drugiej karuzeli:

<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>

Źródło

2012-05-09 18:16:31 dgabriel

Możesz mieć wiele karuzel działających na jednej stronie, wszystko co musisz zrobić, to odpowiednio je wywołać. Weźmy na przykład ten przykład pisałem na innym pytaniu napisałem:

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

Mam trzy karuzele uruchomione w tym samym czasie, każdy z własnym unikalnym identyfikatorem. Oni są nazywane przy użyciu selektor atrybutu tak:

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

Więc każdy karuzela ma identyfikator, który rozpoczyna się dokładnie z identyfikatorem #myCarousel, a następnie numer, aby ustawić je od siebie.

Ale można też zdefiniować instancję dla każdej karuzeli na tej samej linii, na przykład: (. Zauważ, jak każdy selektor jest oddzielone przecinkiem)

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

i będzie działać jak dobrze, więc po prostu upewnij się, że używasz prawidłowego selektora dla każdej instancji Twoich karuzel.

Źródło

2012-05-09 18:16:15

wielką wskazówka dla korzystania z wielu identyfikatorów. –

czy można wyświetlać je w siatce? zamiast układać się jeden na drugim? – caffeinescript

Doskonałe rozwiązanie, zadziałało dla mnie. – Pupil

Czy na jednej stronie można umieścić wiele karuzeli Bootstrap na Twitterze?

Odpowiedz

Powiązane problemy