Как использовать несколько слайдеров от bootstrap на одной странице?

Question

[HeartOfProgrammer]

Есть 2 слайдера, работает из них только 1, второй тоже работает, но кнопки "prev", "next" не переключают картинки.

Слайдер 1

<div id="carousel" class="carousel slide">
    <ol class="carousel-indicators"></ol>

    <div class="carousel-inner">
      <div class="item active">
        <img src="img/4.png" alt="" />

        <div class="carousel-caption">
          <h3>...</h3>

          <p>...</p>
        </div>
      </div>

      <div class="item"><img src="img/5.png" alt="" /></div>

      <div class="item"><img src="img/6.png" alt="" /></div>

      <div class="item"><img src="img/7.png" alt="" /></div>
    </div><a href="#carousel" class="left carousel-control" data-slide="prev"></a>
    <a href="#carousel" class="right carousel-control" data-slide="next"></a>
  </div>

Слайдер 2

<div id="carousel" class="carousel slide">
    <ol class="carousel-indicators"></ol>

    <div class="carousel-inner">
      <div class="item active"><img src="img/ipad.png" alt="" /></div>

      <div class="item"><img src="img/intro-bg.png" alt="" /></div>

      <div class="item"><img src="img/phones.png" alt="" /></div>

      <div class="item"><img src="img/nature.png" alt="" /></div>
    </div><a href="#carousel2" class="left carousel-control" data-slide="prev"></a>
    <a href="#carousel2" class="right carousel-control" data-slide="next"></a>
  </div>

Пробовал делать разные id и классы, не получается. Как вообще решить эту проблему?

Answer 1

[Сергей Новиков]

<div id="carousel_1" class="carousel slide">
    <a href="#carousel_1" class="left carousel-control" data-slide="prev"></a>
    <a href="#carousel_1" class="right carousel-control" data-slide="next"></a>
</div>
<div id="carousel_2" class="carousel slide">
    <a href="#carousel_2" class="left carousel-control" data-slide="prev"></a>
    <a href="#carousel_2" class="right carousel-control" data-slide="next"></a>
</div>

Comments

[Erkin Holikov]

А я вставил не 2 а 4 модалка. А у меня индикаторы не работает при нажатие. Как быть в таком случае?

[Aieron]

Erkin Holikov, хоть 10 проблема в одинаковом id и data-target
для примера моя карусель

<div id="carousel-my" class="col-xs-offset-0 hidden-xs carousel slide" data-ride="carousel">	<ol class="carousel-indicators">		<li 
data-target="#carousel-my" data-slide-to="0" class="active"></li>		<li data-target="#carousel-my" data-slide-to="1" 
class=""></li>		<li data-target="#carousel-my" data-slide-to="2" class=""></li>		<li data-target="#carousel-my" 
data-slide-to="3" class=""></li></ol>

а у второй вместо carousel-my - carousel-block-captions обратите внимание что везде где карусель май была блок капшн и просто заменив все значения data-target на значение id удалось добиться чтобы она таки работала.