title: Bootstrap Carousel Toggleable / Dynamic Tabs
body: <p>i try to do in every tab an Picture Gallery (Home, Menu1, Menu2, Menu3) , in the first tab it works but in the other tab(Menu1) it won´t work. It start the gallery but cant switch with the selektor icons. Have anybody an idea?                                                                              .</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .carousel-inner &gt; .item &gt; img,
    .carousel-inner &gt; .item &gt; a &gt; img {
      width: 70%;
      margin: auto;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Toggle&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  
    &lt;/style&gt;
      &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;h2&gt;Dynamic Tabs&lt;/h2&gt;
    &lt;p&gt;To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.&lt;/p&gt;
  
    &lt;ul class="nav nav-tabs"&gt;
      &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#menu1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#menu2"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#menu3"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;div class="tab-content"&gt;
      &lt;div id="home" class="tab-pane fade in active"&gt;
        &lt;h3&gt;HOME&lt;/h3&gt;
        &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
  
        &lt;div class="item active"&gt;
          &lt;img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Chania&lt;/h3&gt;
            &lt;p&gt;The atmosphere in Chania has a touch of Florence and Venice.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Chania&lt;/h3&gt;
            &lt;p&gt;The atmosphere in Chania has a touch of Florence and Venice.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Flowers&lt;/h3&gt;
            &lt;p&gt;Beautiful flowers in Kolymbari, Crete.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Flowers&lt;/h3&gt;
            &lt;p&gt;Beautiful flowers in Kolymbari, Crete.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    
      &lt;/div&gt;
  
      &lt;!-- Left and right controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="menu1" class="tab-pane fade"&gt;
        &lt;h3&gt;Menu 1&lt;/h3&gt;
        &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
  
        &lt;div class="item active"&gt;
          &lt;img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Chania&lt;/h3&gt;
            &lt;p&gt;The atmosphere in Chania has a touch of Florence and Venice.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Chania&lt;/h3&gt;
            &lt;p&gt;The atmosphere in Chania has a touch of Florence and Venice.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Flowers&lt;/h3&gt;
            &lt;p&gt;Beautiful flowers in Kolymbari, Crete.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Flowers&lt;/h3&gt;
            &lt;p&gt;Beautiful flowers in Kolymbari, Crete.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    
      &lt;/div&gt;
  
      &lt;!-- Left and right controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="menu2" class="tab-pane fade"&gt;
        &lt;h3&gt;Menu 2&lt;/h3&gt;
        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="menu3" class="tab-pane fade"&gt;
        &lt;h3&gt;Menu 3&lt;/h3&gt;
        &lt;p&gt;Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>