在一个页面上使用两个引导转盘

Question

我正尝试在一个网页上使用两个引导转盘。第一个可以正常工作，但是第二个不能工作。我能得到帮助让这两台机器正常工作吗？

我尝试过更改引用转盘，但由于某些原因不起作用

我假设他们使用相同的js和css文件？

代码可以在下面运行

​

$(document).ready( function() {
    $('#myCarousel').carousel({
    	interval:   4000
	});
	
	var clickEvent = false;
	$('#myCarousel').on('click', '.nav a', function() {
			clickEvent = true;
			$('.nav li').removeClass('active');
			$(this).parent().addClass('active');		
	}).on('slid.bs.carousel', function(e) {
		if(!clickEvent) {
			var count = $('.nav').children().length -1;
			var current = $('.nav li.active');
			current.removeClass('active').next().addClass('active');
			var id = parseInt(current.data('slide-to'));
			if(count == id) {
				$('.nav li').first().addClass('active');	
			}
		}
		clickEvent = false;
	});
});

body { padding-top: 20px; }
#myCarousel .nav a small {
    display:block;
}
#myCarousel .nav {
    background:#eee;
}
#myCarousel .nav a {
    border-radius:0px;
}
header{
    position: absolute;
    top: 0;
    height: 60px;
    width: 100%;
    background-color: skyblue;
    
}
#header{
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
}

header nav ul{
    text-align: center;
}

header nav ul li{
    text-align: center;
    display: inline-block;
    margin-right: 50px;
    margin-top: 20px;

}
header nav ul li:last-of-type{
    margin-right: 0;
}

header nav ul li a{
        color: #fff;
}

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
      
        <div class="item active">
          <img src="http://placehold.it/1200x400/cccccc/ffffff">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
          </div>
        </div><!-- End Item -->
 
         <div class="item">
          <img src="http://placehold.it/1200x400/999999/cccccc">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
          </div>
        </div><!-- End Item -->
        
        <div class="item">
          <img src="http://placehold.it/1200x400/dddddd/333333">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
          </div>
        </div><!-- End Item -->
        
        <div class="item">
          <img src="http://placehold.it/1200x400/999999/cccccc">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
          </div>
        </div><!-- End Item -->
                
      </div><!-- End Carousel Inner -->
        

        <ul class="nav nav-pills nav-justified">
          <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
        </ul>

    </div><!-- End Carousel -->
</div>



<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
      
        <div class="item active">
          <img src="http://placehold.it/1200x400/cccccc/ffffff">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
          </div>
        </div><!-- End Item -->
 
         <div class="item">
          <img src="http://placehold.it/1200x400/999999/cccccc">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
          </div>
        </div><!-- End Item -->
        
        <div class="item">
          <img src="http://placehold.it/1200x400/dddddd/333333">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
          </div>
        </div><!-- End Item -->
        
        <div class="item">
          <img src="http://placehold.it/1200x400/999999/cccccc">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
          </div>
        </div><!-- End Item -->
                
      </div><!-- End Carousel Inner -->
        

        <ul class="nav nav-pills nav-justified">
          <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
        </ul>

    </div><!-- End Carousel -->
</div>

​

Answer 1

每页只能使用一个id。不是给你的第二个carousel一个不同的ID，而是给你的两个carousel相同的类，然后在你的javascript中引用那个类。

<div id="firstCarousel" class="carousel slide myCarousel">
<!-- rest of your code-->
</div><!--end carousel-->
<div id="secondCarousel" class="carousel slide myCarousel">
<!--rest of your code-->
</div><!--end carousel-->

//call all carousels with this class
$('.myCarousel').carousel();

这样，您就不必重复您的Javascript代码。

Answer 2

圆盘传送带由其ID引用：

<div id="myCarousel" class="carousel slide" data-ride="carousel">

因此，要使用第二个实例，您需要给它一个不同的ID，并提供运行第二个实例的脚本：

<div id="mySecondCarousel" class="carousel slide" data-ride="carousel">


$(document).ready( function() {
$('#myCarousel').carousel({
    interval:   4000
});

var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
        clickEvent = true;
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');        
}).on('slid.bs.carousel', function(e) {
    if(!clickEvent) {
        var count = $('.nav').children().length -1;
        var current = $('.nav li.active');
        current.removeClass('active').next().addClass('active');
        var id = parseInt(current.data('slide-to'));
        if(count == id) {
            $('.nav li').first().addClass('active');    
        }
    }
    clickEvent = false;
});

$('#mySecondCarousel').carousel({
    interval:   4000
});

var clickEventTwo = false;
$('#mySecondCarousel').on('click', '.nav a', function() {
        clickEventTwo = true;
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');        
}).on('slid.bs.carousel', function(e) {
    if(! clickEventTwo) {
        var count = $('.nav').children().length -1;
        var current = $('.nav li.active');
        current.removeClass('active').next().addClass('active');
        var id = parseInt(current.data('slide-to'));
        if(count == id) {
            $('.nav li').first().addClass('active');    
        }
    }
    clickEventTwo = false;
});
});

然后修改CSS以设置两个实例的样式：

#myCarousel .nav a small,
#mySecondCarousel .nav a small {
    display:block;
}
#myCarousel .nav,
#mySecondCarousel .nav {
    background:#eee;
}
#myCarousel .nav a,
#mySecondCarousel .nav a {
    border-radius:0px;
}

Answer 3

如果您想使用相同的名称，请更改我们的id名称或使用class。我更喜欢使用class，所以用js和css编写的代码会更少。

代码：https://codepen.io/Sahero/pen/EvvNBj

更新代码：

JS：(将'#‘更改为'.’表示` `class)

$(document).ready(function() {
  $(".myCarousel").carousel({
    interval: 4000
  });

  var clickEvent = false;
  $(".myCarousel")
    .on("click", ".nav a", function() {
    clickEvent = true;
    $(".nav li").removeClass("active");
    $(this).parent().addClass("active");
  })
    .on("slid.bs.carousel", function(e) {
    if (!clickEvent) {
      var count = $(".nav").children().length - 1;
      var current = $(".nav li.active");
      current.removeClass("active").next().addClass("active");
      var id = parseInt(current.data("slide-to"));
      if (count == id) {
        $(".nav li").first().addClass("active");
      }
    }
    clickEvent = false;
  });
});

CSS:

body {
  padding-top: 20px;
}
.myCarousel .nav a small {
  display: block;
}
.myCarousel .nav {
  background: #eee;
}
.myCarousel .nav a {
  border-radius: 0px;
}
header {
  position: absolute;
  top: 0;
  height: 60px;
  width: 100%;
  background-color: skyblue;
}
#header {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
}

header nav ul {
  text-align: center;
}

header nav ul li {
  text-align: center;
  display: inline-block;
  margin-right: 50px;
  margin-top: 20px;
}
header nav ul li:last-of-type {
  margin-right: 0;
}

header nav ul li a {
  color: #fff;
}

HTML：

<div class="container">
  <div id="myCarousel" class="myCarousel carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="http://placehold.it/1200x400/cccccc/ffffff">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
        </div>
      </div>
      <!-- End Item -->

      <div class="item">
        <img src="http://placehold.it/1200x400/999999/cccccc">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
        </div>
      </div>
      <!-- End Item -->

      <div class="item">
        <img src="http://placehold.it/1200x400/dddddd/333333">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
        </div>
      </div>
      <!-- End Item -->

      <div class="item">
        <img src="http://placehold.it/1200x400/999999/cccccc">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
      </div>
      <!-- End Item -->

    </div>
    <!-- End Carousel Inner -->


    <ul class="nav nav-pills nav-justified">
      <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
      <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
      <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
      <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
    </ul>

    <header class="row" id="header">
      <nav>
        <ul>
          <li>
            <a href="#">Logo</a>
          </li>
          <li>
            <a href="#">Services</a>
          </li>
          <li>
            <a href="#">Booking</a>
          </li>
          <li>
            <a href="#">Price</a>
          </li>
          <li>
            <a href="#">Contact Us</a>
          </li>
        </ul>
      </nav>
    </header>
  </div>
  <!-- End Carousel -->
</div>

<div class="container">
  <div id="myCarousel2" class="carousel slide myCarousel" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="http://placehold.it/1200x400/cccccc/ffffff">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
        </div>
      </div>
      <!-- End Item -->

      <div class="item">
        <img src="http://placehold.it/1200x400/999999/cccccc">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
        </div>
      </div>
      <!-- End Item -->

      <div class="item">
        <img src="http://placehold.it/1200x400/dddddd/333333">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
        </div>
      </div>
      <!-- End Item -->

      <div class="item">
        <img src="http://placehold.it/1200x400/999999/cccccc">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
      </div>
      <!-- End Item -->

    </div>
    <!-- End Carousel Inner -->


    <ul class="nav nav-pills nav-justified">
      <li data-target="#myCarousel2" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
      <li data-target="#myCarousel2" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
      <li data-target="#myCarousel2" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
      <li data-target="#myCarousel2" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
    </ul>

  </div>
  <!-- End Carousel -->
</div>

不要忘记更改data-target属性。