在一頁上使用兩個引導程序傳送帶

我想在一個網頁上使用兩個引導程序傳送帶。第一個工作正常，但第二個沒有工作。我可以請幫助讓這兩個工作？在一頁上使用兩個引導程序傳送帶

我試圖改變基準轉盤但那不工作由於某種原因

我假設他們使用相同的JS和CSS文件？

的代碼可以在下面

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

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>

來源

2017-08-11 Hamish Wu

第二個在哪裏？ – Ofisora

@Ofisora抱歉，忘了提及我使用了同一個在html代碼中粘貼兩次的代碼 –

您能否更新代碼？ – Ofisora

運行的傳送帶通過其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; 
}

來源

2017-08-12 00:13:03

您只能使用一個每頁id。不要給你的第二個傳送帶一個不同的ID，給你的傳送帶同一個類，然後在你的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代碼。

來源

2017-08-12 00:17:10

如果您想使用相同的名稱，請更改我們的id名稱或使用class。我更喜歡使用class，所以js和css中的代碼會更少。

CODEPEN：https://codepen.io/Sahero/pen/EvvNBj

更新代碼：

JS：（更改 '＃' 到代表`類 ''）

$(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屬性。

來源

2017-08-12 00:31:04 Ofisora

在這裏，你有一個解決方案去https://jsfiddle.net/a4ogrj3m/

$(document).ready(function() { 
 
    var clickEvent = false; 
 
    $('.carousel').carousel({ 
 
    interval: 4000 
 
    }).on('click', '.nav a', function() { 
 
    $('.nav li').removeClass('active'); 
 
    $(this).parent().addClass('active'); \t \t 
 
    }).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'); \t 
 
     } 
 
    } 
 
    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; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<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="myCarousel1" 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="#myCarousel1" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li> 
 
      <li data-target="#myCarousel1" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li> 
 
      <li data-target="#myCarousel1" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li> 
 
      <li data-target="#myCarousel1" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li> 
 
     </ul> 
 

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

你ID需要被獨特，所以改變一個carousel的ID &同樣改變.nav a目標。

我已使用鏈接方法jQuery &使用.carousel類來引用jQuery中的元素。

來源

2017-08-12 05:48:43 Shiladitya

在一頁上使用兩個引導程序傳送帶

回答

相關問題