How to use multiple bootstrap sliders on one page?

Question

css

There are 2 sliders, only 1 of them works, the second one also works, but the "prev", "next" buttons do not switch pictures.
Slider 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>

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

I tried to make different id and classes, it doesn't work. How to solve this problem in general?

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>