javascript - popovers - ¿Es posible tener múltiples carruseles de Twitter Bootstrap en una página?
tooltip bootstrap css (2)
Cambie el href en los enlaces de navegación del carrusel para que coincida con el valor de identificación del carrusel que está controlando. Ese valor href es cómo bootstrap determina cuál deslizar. Por lo tanto, deberá cambiar lo siguiente:
<a class="carousel-control left" href="#carousel-1" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">›</a>
Y para el segundo carrusel:
<a class="carousel-control left" href="#carousel-2" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel-2" data-slide="next">›</a>
Versión de Twitter Bootstrap: 2.0.3
Ejemplo de código HTML:
<!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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</body>
</html>
Ejemplo de CSS: bootstrap.css
Problema: para que dos carruseles de arranque funcionen en una página, básicamente, necesito establecer dos ID diferentes para sus contenedores div ( #carousel-1 y #carousel-2 ). Pero me he dado cuenta de que los carruseles no funcionan a menos que use #myCarousel como ID del contenedor div.
En ese caso, ¿cómo puedo tener múltiples carruseles en una sola página?
Puede tener múltiples carruseles ejecutándose en una sola página; todo lo que tiene que hacer es llamarlos de manera adecuada. Por ejemplo, tome este ejemplo que escribí en otra pregunta que publiqué:
http://jsfiddle.net/andresilich/S2rnm/
Tengo tres carruseles funcionando al mismo tiempo, cada uno con su propia identificación única. Los llaman usando un selector de atributos como ese:
$(''[id^="myCarousel"]'').carousel();
Entonces, cada carrusel tiene una identificación que comienza exactamente con la identificación de #myCarousel y luego un número para separarlos.
Pero también puede definir una instancia para cada carrusel en la misma línea, por ejemplo: (Observe cómo cada selector está separado por una coma).
$(''#myCarousel1, #myCarousel2, #differentCarousel3'').carousel();
Y también funcionará, así que asegúrese de usar un selector válido para cada instancia de sus carruseles.