Возможно ли иметь несколько каруселей Bootstrap Twitter на одной странице?

Twitter Bootstrap Version: 2.0.3

Пример кода 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">&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>

Пример CSS: bootstrap.css

Проблема: Для двух загрузочных каруселей для работы на странице, в основном, мне нужно установить два разных идентификатора для своих контейнеров div (#carousel-1 и #carousel-2). Но я заметил, что карусели не работают, если я не использую #myCarousel как идентификатор контейнера div.

В этом случае, как я могу иметь несколько каруселей на одной странице?

Ответ 1

Измените href в своих ссылках на карусель, чтобы соответствовать значению идентификатора карусели, которую вы контролируете. Это значение href - это то, как bootstrap определяет, для скольжения. Поэтому вам нужно будет изменить следующее:

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

Ответ 2

У вас может быть несколько каруселей, работающих на одной странице, все, что вам нужно сделать, это вызвать их соответствующим образом. Например, возьмите этот пример, я написал по другому вопросу, который я разместил:

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

У меня есть три карусели, которые работают одновременно, каждый со своим уникальным идентификатором. Они вызывается с помощью селектора атрибутов:

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

Итак, каждая карусель имеет идентификатор, который начинается точно с идентификатором #myCarousel, а затем числом, чтобы разделить их.

Но вы также можете определить экземпляр для каждой карусели в одной строке, например: (Обратите внимание, что каждый селектор разделяется запятой.)

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

И он будет работать, поэтому просто убедитесь, что вы используете действительный селектор для каждого экземпляра ваших каруселей.