同じページに2つのブートストラップカルーセルを置く方法は？

同じページに2つのブートストラップカルーセルを使用しようとしています。次のコードです：同じページに2つのブートストラップカルーセルを置く方法は？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<!--BOOTSTRAP LINKS FOR CAROUSEL--> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<!--BOOTSTRAP LINKS--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="style.css" type="text/css" /> 
 
</head> 
 

 
<body> 
 
    <!--START OF NAVBAR--> 
 
    <div class="nav-box"> 
 
     <br> 
 
     <nav class="navbar navbar-default"> 
 
      <div class="container-fluid"> 
 
       <div class="navbar-header"> 
 
        <img src="logo.png" id="logo"></img> 
 
       </div> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="active"><a href="#">HOME</a></li> 
 
        <li><a href="#">ABOUT S</a></li> 
 
       </ul> 
 
      </div> 
 
     </nav> 
 
    </div> 
 
    <!--END OF NAVBAR--> 
 
    <!--START OF BOOTSTRAP CAROUSEL--> 
 
    <section class="section-white"> 
 
     <div class="container"> 
 
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
       <!-- Indicators --> 
 
       <ol class="carousel-indicators"> 
 
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
        <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
        <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
       </ol> 
 
       <!-- Wrapper for slides --> 
 
       <div class="carousel-inner" style="width:100%; height: 500px !important;"> 
 
        <div class="item active"> 
 
         <img src="a.jpg" alt="..."> 
 
         <div class="carousel-caption"> 
 
          <h2>Heading</h2> 
 
         </div> 
 
        </div> 
 
        <div class="item"> 
 
         <img src="b.jpg" alt="..."> 
 
         <div class="carousel-caption"> 
 
          <h2>Heading</h2> 
 
         </div> 
 
        </div> 
 
        <div class="item"> 
 
         <img src="c.jpg" alt="..."> 
 
         <div class="carousel-caption"> 
 
          <h2>Heading</h2> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <!-- Controls --> 
 
       <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
 
        <span class="glyphicon glyphicon-chevron-left"></span> 
 
       </a> 
 
       <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
 
        <span class="glyphicon glyphicon-chevron-right"></span> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </section> 
 
    <!--END OF BOOTSTRAP CAROUSEL--> 
 
    <!--START OF RADIO BAR--> 
 
    <div class="radio-bar"> 
 
     <div class="text1"> 
 
      <h3 id="text1-line1">streams</h3> 
 
      <h4 id="text1-line2">shows</h4> 
 
     </div> 
 
     <div id="audio"> 
 
      <audio controls> 
 
       <source src="viper.mp3" type="audio/mp3" controls="controls"> 
 
      </audio> 
 
     </div> 
 
     <div id="podcast-box"> 
 
      <img src="icon.png" id="image"></img> 
 
      <p id="pheading">casts</p> 
 
     </div> 
 
     <div id="blue-box"> 
 
      <img src="blue.svg" id="blue-box-image"></img> 
 
      <p id="blue-box-heading">show</p> 
 
     </div> 
 
    </div> 
 
    <!--END OF RADIO BAR--> 
 
    <!--START OF ABOUT US BAR--> 
 
    <div class="about-us"> 
 
     <h3 id="heading">ABOUT</h3> 
 
     <p id="para">*******</p> 
 
     <div class="image-box"> 
 
      <img src="image.jpg" id="image"></img> 
 
     </div> 
 
    </div> 
 
    <!--END OF ABOUT US BAR--> 
 
    <!--START OF VIDEO CAROUSEL--> 
 
    <div class="container" id="container"> 
 
     <div class="row" id="row"> 
 
      <div class="col-md-12"> 
 
       <div id="Carousel" class="carousel slide" id="carousel"> 
 
        <ol class="carousel-indicators" id="carousel-indicators"> 
 
         <li data-target="#Carousel" data-slide-to="0" class="active" id="action"></li> 
 
         <li data-target="#Carousel" data-slide-to="1"></li> 
 
         <li data-target="#Carousel" data-slide-to="2"></li> 
 
        </ol> 
 
        <!-- Carousel items --> 
 
        <div class="carousel-inner" id="carousel-inner"> 
 
         <div class="item active" id="item-active"> 
 
          <div class="row" id="row"> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
          </div> 
 
          <!--.row--> 
 
         </div> 
 
         <!--.item--> 
 
         <div class="item" id="item"> 
 
          <div class="row" id="row"> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
          </div> 
 
          <!--.row--> 
 
         </div> 
 
         <!--.item--> 
 
         <div class="item" id="item"> 
 
          <div class="row" id="row"> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a> 
 
           </div> 
 
          </div> 
 
          <!--.row--> 
 
         </div> 
 
         <!--.item--> 
 
        </div> 
 
        <!--.carousel-inner--> 
 
        <a data-slide="prev" href="#Carousel" class="left carousel-control" id="carousel-control">‹</a> 
 
        <a data-slide="next" href="#Carousel" class="right carousel-control" id="carousel-control">›</a> 
 
       </div> 
 
       <!--.Carousel--> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!--.container--> 
 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('#Carousel').carousel({ 
 
      interval: 5000 
 
     }) 
 
    }); 
 
    </script> 
 
    <!--END OF VIDEO CAROUSEL--> 
 
</body> 
 
</html>

それは前のカルーセルと重なったので、私は、IDにクラス名を変更しました。それを行った後でも、2番目のカルーセルはその直前の要素と重なっており、右側のナビゲーション矢印は表示されません。

私は次のリンクを確認しました：Is it possible to have multiple Twitter Bootstrap carousels on one page?。

ここでは、ナビゲーションhrefが異なるIDを指し示す必要があることを示しています。しかし、私はまだ問題を抱えています。

どこが間違っていますか？

出典

2017-09-07 Steve Doson

あなたは1つがクラスであれば、それは文句を言わない仕事、異なるID /クラスを持っている必要があります：「カルーセル」、もう一つは、IDです：「カルーセル」。彼らは異なっている必要があります。 – Seb

@Seb私はクラス名を変更しました。それらのすべて。カルーセル2のように。しかし、それは役に立たなかった。 –

「オーバーラップする」という意味を説明できますか？名前が同じか、カルーセルが視覚的に重なっていることを意味しますか？ –

最終編集あなたが行く、私は第二カルーセルのサムネイルにカルーセル機能を追加しました。 :)

jQuery(document).ready(function($) { 
 
    $('#myCarousel3').carousel({ 
 
     interval: 1000000 
 
    }); 
 

 
    $('#myCarousel').carousel({ 
 
      interval: 3000 
 
    }); 
 
    $('#myCarousel2').carousel({ 
 
      interval: 2000 
 
    }); 
 

 
    $('#carousel-text').html($('#slide-content-0').html()); 
 

 
    //Handles the carousel thumbnails 
 
    $('[id^=carousel-selector-]').click(function(){ 
 
      var id_selector = $(this).attr("id"); 
 
      var id = id_selector.substr(id_selector.length -1); 
 
      var id = parseInt(id); 
 
      $('#myCarousel').carousel(id); 
 
    }); 
 

 

 
    // When the carousel slides, auto update the text 
 
    $('#myCarousel').on('slid', function (e) { 
 
      var id = $('.item.active').data('slide-number'); 
 
      $('#carousel-text').html($('#slide-content-'+id).html()); 
 
    }); 
 
});

#myCarousel { 
 
    margin-top: 30px; 
 
} 
 
.thumbnail { 
 
    border: none; 
 
} 
 
.thumbnail-modifier { 
 
    margin-bottom: 0px; 
 
} 
 
.thumbnails { 
 
    display: inline-flex; 
 
    width: 100%; 
 
} 
 
.thumbnails-center { 
 
    display: flex; 
 
    margin: 0 auto; 
 
} 
 
.cursor { 
 
    cursor: pointer; 
 
} 
 
.row-fluid { 
 
    display: inline-flex; 
 
    width: 100%; 
 
} 
 
#myCarousel3 { 
 
    margin-top: 20px; 
 
    margin-bottom: 50px; 
 
} 
 
.row-center { 
 
    display: flex; 
 
    margin: 0 auto; 
 
} 
 
.carousel-control-modifier { 
 
    background-image: none !important; 
 
    color: black !important; 
 
}

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> 
 

 
<div class="container"> 
 
<div id="main_area"> 
 
    <!-- Slider --> 
 
    <div class="row"> 
 
     <div id="slider"> 
 
      <!-- Top part of the slider --> 
 
      <div class="row"> 
 
       <div id="carousel-bounding-box"> 
 
        <div class="carousel slide" id="myCarousel2"> 
 
         <!-- Carousel items --> 
 
         <div class="carousel-inner"> 
 
          <div class="active item" data-slide-number="0"> 
 
          <img src="http://placehold.it/1200x546&text=one"></div> 
 

 
          <div class="item" data-slide-number="1"> 
 
          <img src="http://placehold.it/1200x546&text=two"></div> 
 

 
          <div class="item" data-slide-number="2"> 
 
          <img src="http://placehold.it/1200x546&text=three"></div> 
 

 
          <div class="item" data-slide-number="3"> 
 
          <img src="http://placehold.it/1200x546&text=four"></div> 
 

 
          <div class="item" data-slide-number="4"> 
 
          <img src="http://placehold.it/1200x546&text=five"></div> 
 

 

 
         </div><!-- Carousel nav --> 
 
         <a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev"> 
 
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
          <span class="sr-only">Previous</span> 
 
         </a> 
 
         <a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next"> 
 
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
          <span class="sr-only">Next</span> 
 
         </a> 
 
        </div> 
 
       </div> 
 
     </div> 
 
    </div><!--/Slider--> 
 
</div> 
 
    <div class="row"> 
 
     <div id="slider"> 
 
      <!-- Top part of the slider --> 
 
      <div class="row"> 
 
       <div id="carousel-bounding-box"> 
 
        <div class="carousel slide" id="myCarousel"> 
 
         <!-- Carousel items --> 
 
         <div class="carousel-inner"> 
 
          <div class="active item" data-slide-number="0"> 
 
          <img src="http://placehold.it/1200x546&text=one"></div> 
 

 
          <div class="item" data-slide-number="1"> 
 
          <img src="http://placehold.it/1200x546&text=two"></div> 
 

 
          <div class="item" data-slide-number="2"> 
 
          <img src="http://placehold.it/1200x546&text=three"></div> 
 

 
          <div class="item" data-slide-number="3"> 
 
          <img src="http://placehold.it/1200x546&text=four"></div> 
 

 
          <div class="item" data-slide-number="4"> 
 
          <img src="http://placehold.it/1200x546&text=five"></div> 
 

 

 
         </div><!-- Carousel nav --> 
 
         <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
          <span class="sr-only">Previous</span> 
 
         </a> 
 
         <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
          <span class="sr-only">Next</span> 
 
         </a> 
 
        </div> 
 
       </div> 
 
     </div> 
 
    </div><!--/Slider--> 
 
</div> 
 

 
<div class=""> 
 
    <div id="myCarousel3" class="carousel slide">    
 
    <!-- Carousel items --> 
 
    <div class="carousel-inner"> 
 

 
    <div class="item active"> 
 
     <div class="row-fluid"> 
 
      <div class="row-center"> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a> 
 
      </div> 
 
     </div><!--/row-fluid--> 
 
    </div><!--/item--> 
 

 
    <div class="item"> 
 
     <div class="row-fluid"> 
 
      <div class="row-center"> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a> 
 
      </div> 
 
     </div><!--/row-fluid--> 
 
    </div><!--/item--> 
 

 
    <div class="item"> 
 
     <div class="row-fluid"> 
 
      <div class="row-center"> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a> 
 
       <a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a> 
 
      </div> 
 
     </div><!--/row-fluid--> 
 
    </div><!--/item--> 
 

 
    </div><!--/carousel-inner--> 
 

 
     <a class="left carousel-control carousel-control-modifier" href="#myCarousel3" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="right carousel-control carousel-control-modifier" href="#myCarousel3" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div><!--/myCarousel--> 
 

 
</div> 
 
</div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

出典

2017-09-09 20:15:43 Seb

完璧！どうもありがとうございます！！！！ :) –

私はサムネイルのサイズを変更し、サムネイルとナビゲーション矢印の間の距離を減らそうとしています。私はパッディングとサムネイル間の距離を増やすことができましたが、私はどのように四角形のサイズとそれらとナビゲーション矢印間の距離を変更できますかと思います。 –

サムネイルを変更するには、ここでサイズを変更する必要があります。http://placehold.it/170x100&text=one、それを220x120にしたい場合は、代わりにそのサムネイルを入れてください。サムネイルとナビゲーション矢印の距離を変更するには、これを.carousel-control-modifier cssに追加する必要があります。今度はその15％の幅、もしあなたが矢印を近づけたいならば、幅：25％に変更してください。か何か。 @ SteveDoson – Seb

更新3：ここでは、これがあなたの望むものだと確信しています。すべてのコードを自分のサーバーにコピーする必要があります。そこ:)

jQuery(document).ready(function($) { 
 
    $('#myCarousel').carousel({ 
 
     interval: 3000 
 
    }); 
 
    $('#myCarousel2').carousel({ 
 
     interval: 2000 
 
    }); 
 

 
    $('#carousel-text').html($('#slide-content-0').html()); 
 

 
    //Handles the carousel thumbnails 
 
    $('[id^=carousel-selector-]').click(function(){ 
 
     var id_selector = $(this).attr("id"); 
 
     var id = id_selector.substr(id_selector.length -1); 
 
     var id = parseInt(id); 
 
     $('#myCarousel').carousel(id); 
 
    }); 
 

 

 
    // When the carousel slides, auto update the text 
 
    $('#myCarousel').on('slid', function (e) { 
 
     var id = $('.item.active').data('slide-number'); 
 
     $('#carousel-text').html($('#slide-content-'+id).html()); 
 
    }); 
 
});

#myCarousel { 
 
    margin-top: 30px; 
 
} 
 
.thumbnail { 
 
    border: none; 
 
} 
 
.thumbnails { 
 
    display: inline-flex; 
 
    width: 100%; 
 
} 
 
.thumbnails-center { 
 
    display: flex; 
 
    margin: 0 auto; 
 
} 
 
.cursor { 
 
    cursor: pointer; 
 
}

<link href='test2.css' rel='stylesheet' type='text/css'> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> 
 
<div class="container"> 
 
    <div id="main_area"> 
 
     <!-- Slider --> 
 
     <div class="row"> 
 
      <div id="slider"> 
 
       <!-- Top part of the slider --> 
 
       <div class="row"> 
 
        <div id="carousel-bounding-box"> 
 
         <div class="carousel slide" id="myCarousel2"> 
 
          <!-- Carousel items --> 
 
          <div class="carousel-inner"> 
 
           <div class="active item" data-slide-number="0"> 
 
            <img src="http://placehold.it/1200x546&text=one"></div> 
 
           <div class="item" data-slide-number="1"> 
 
            <img src="http://placehold.it/1200x546&text=two"></div> 
 
           <div class="item" data-slide-number="2"> 
 
            <img src="http://placehold.it/1200x546&text=three"></div> 
 
           <div class="item" data-slide-number="3"> 
 
            <img src="http://placehold.it/1200x546&text=four"></div> 
 
           <div class="item" data-slide-number="4"> 
 
            <img src="http://placehold.it/1200x546&text=five"></div> 
 
          </div> 
 
          <!-- Carousel nav --> 
 
          <a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev"> 
 
           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
           <span class="sr-only">Previous</span> 
 
          </a> 
 
          <a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next"> 
 
           <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
           <span class="sr-only">Next</span> 
 
          </a> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <!--/Slider--> 
 
     </div> 
 
     <div class="row"> 
 
      <div id="slider"> 
 
       <!-- Top part of the slider --> 
 
       <div class="row"> 
 
        <div id="carousel-bounding-box"> 
 
         <div class="carousel slide" id="myCarousel"> 
 
          <!-- Carousel items --> 
 
          <div class="carousel-inner"> 
 
           <div class="active item" data-slide-number="0"> 
 
            <img src="http://placehold.it/1200x546&text=one"></div> 
 
           <div class="item" data-slide-number="1"> 
 
            <img src="http://placehold.it/1200x546&text=two"></div> 
 
           <div class="item" data-slide-number="2"> 
 
            <img src="http://placehold.it/1200x546&text=three"></div> 
 
           <div class="item" data-slide-number="3"> 
 
            <img src="http://placehold.it/1200x546&text=four"></div> 
 
           <div class="item" data-slide-number="4"> 
 
            <img src="http://placehold.it/1200x546&text=five"></div> 
 
          </div> 
 
          <!-- Carousel nav --> 
 
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
           <span class="sr-only">Previous</span> 
 
          </a> 
 
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
           <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
           <span class="sr-only">Next</span> 
 
          </a> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <!--/Slider--> 
 
      <div class="row hidden-phone" id="slider-thumbs"> 
 
       <!-- Bottom switcher of slider --> 
 
       <div class="thumbnails"> 
 
        <div class="thumbnails-center"> 
 
         <a class="thumbnail cursor" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a> 
 
         <a class="thumbnail cursor" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a> 
 
         <a class="thumbnail cursor" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a> 
 
         <a class="thumbnail cursor" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a> 
 
         <a class="thumbnail cursor" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>  
 
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

出典

2017-09-07 19:56:27 Seb

スニペットを追加する際に、クラス名をすべて変更しますか？ –

最初のカルーセルのIDが「カルーセル」で、もう一方のカルーセルのIDが「カルーセル2」のIDである必要がある場合は、そのIDを変更する必要があります。 – Seb

@SteveDoson私の編集した答えを見てください:) – Seb

同じページに2つのブートストラップカルーセルを置く方法は？

答えて

関連する問題