具有两种功能的两个旋转木马

Question

问题来了，我想要在一个页面中有两个具有两种不同功能的轮播，这意味着第一个轮播将自动滑动，第二个轮播将手动点击，但我遇到了这个问题：

当第一个轮播滑动时，第二个轮播就会消失
点击第二个轮播时，第一个轮播没有响应。

所以，这是我的代码

$(document).ready(function() {
  $('#carousel-1').carousel({
    interval: 5000
  });
});

$(document).ready(function() {
  $('#carousel-2').carousel({
    interval: false
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="carousel-1" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/350x150" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/350x150" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/350x150" alt="" />
    </div>
  </div>

  <div class="container">
    <div id="carousel-2" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://placehold.it/350x150" alt="" />
        </div>
        <div class="item">
          <img src="http://placehold.it/350x150" alt="" />
        </div>
        <div class="item">
          <img src="http://placehold.it/350x150" alt="" />
        </div>
      </div>
      <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>
    </div>
  </div>

这也是我的 fiddle https://jsfiddle.net/za9un2wc/

我在这里使用 Twitter Bootstrap 进行工作。你们有什么 suggestion/solution 可以给我吗？谢谢

Answer 1

只需在第二个导航中添加 href="#carousel-2"

Answer 2

您应该在第二个轮播之前添加 </div>。我不确定这对你来说是否足够，但我认为看起来不错。

<div id="carousel-1" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/350x150" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/350x150" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/350x150" alt="" />
    </div>
  </div>
</div><!-- Added div -->
<div class="container">
  <div id="carousel-2" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://placehold.it/350x150" alt="" />
      </div>
      <div class="item">
        <img src="http://placehold.it/350x150" alt="" />
      </div>
      <div class="item">
        <img src="http://placehold.it/350x150" alt="" />
      </div>
    </div>
    <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>
  </div>
</div>

具有两种功能的两个旋转木马

Two carousel with two function

html

javascript

carousel

twitter-bootstrap