2つのブートストラップカルーセルを1ページに使用する

1つのウェブページに2つのブートストラップカルーセルを使用しようとしています。最初のものは正常に動作しますが、2番目のものはうまく動作しません。私は2人を動かすために援助をしてもらえますか？私はいくつかの理由2つのブートストラップカルーセルを1ページに使用する

のための参照カルーセルが、そのdoesntの仕事を変更しようとした

私は、彼らが同じのjsとcssファイルを使用すると仮定していますか？

コードは、カルーセルは、そのIDによって参照される

$(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

2番目はどこですか？ – Ofisora

@Ofisora申し訳ありませんが、私は同じコードを2度貼り付けて使用しています。 –

コードを更新してください。 – Ofisora

の下に実行することができます。

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

だから秒1を使用するために、あなたはそれを与える必要があります別のIDを使用し、2番目のインスタンスを実行するスクリプトを提供します。

<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を変更：あなたは1ページあたり1 idを使用することができます

#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

。 2番目のカルーセルに別の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>

と同様.nav aのターゲットを変更ユニークなるので、1 carouselのID &を変更するには、あなたのID必要性を行きます。

jQueryの&は、.carouselクラスを使用してjQueryの要素を参照しています。

出典

2017-08-12 05:48:43 Shiladitya

2つのブートストラップカルーセルを1ページに使用する

答えて

関連する問題