引导程序塔板和轮播问题

Question

我有一个查询。 我有三种不同的Bootstrap Tabpane。 每个选项卡中都有不同的轮播项目。 选择标签后，我想激活轮播。 当前在页面加载时被激活。 当我选择第三个标签时，它到达轮播的几乎中间位置。 谁可以帮我这个事。 我想我们可以通过JS激活它，但是我不确定如何在每个选项卡上激活它

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div style="font-size:12pt;"><ul id="myTab" class="nav nav-tabs" style="width: 100%; padding-top: 10px;"> <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li> <li><a href="#tab2" data-toggle="tab">tab2</a></li> <li><a href="#tab3" data-toggle="tab">tab3</a></li> </ul></div> <div class="tab-pane fade" id="tab1"> <div id="myCarousel1" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators carousel-indicators-numbers" style="bottom: -50px;"> <li data-target="#myCarousel1" data-slide-to="0" class="active"></li> <li data-target="#myCarousel1" data-slide-to="1"></li> </ol> <!-- Wrapper for carousel items --> <div class="carousel-inner" style="margin-top: 3%;"> <div class="item active"><img class="img-responsive center-block imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div> <div class="item"><img class="img-responsive center-block imageslidesize" src="../Images/02.JPG" alt="Second Slide"/></div> </div> </div> <!-- Carousel controls --> <a class="carousel-control left" href="#myCarousel1" style="background:none;color:black;" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="carousel-control right" href="#myCarousel1" style="background:none;color:black;" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> <div class="tab-pane fade" id="tab2"> <div id="myCarousel2" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators carousel-indicators-numbers" style="bottom: -50px;"> <li data-target="#myCarousel2" data-slide-to="0" class="active"></li> <li data-target="#myCarousel2" data-slide-to="1"></li> </ol> <!-- Wrapper for carousel items --> <div class="carousel-inner" style="margin-top: 3%;"> <div class="item active"><img class="img-responsive center-block imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div> <div class="item"><img class="img-responsive center-block imageslidesize" src="../Images/02.JPG" alt="Second Slide"/></div> </div> </div> <!-- Carousel controls --> <a class="carousel-control left" href="#myCarousel2" style="background:none;color:black;" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="carousel-control right" href="#myCarousel2" style="background:none;color:black;" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> <div class="tab-pane fade" id="tab3"> <div id="myCarousel2" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators carousel-indicators-numbers" style="bottom: -50px;"> <li data-target="#myCarousel3" data-slide-to="0" class="active"></li> <li data-target="#myCarousel3" data-slide-to="1"></li> </ol> <!-- Wrapper for carousel items --> <div class="carousel-inner" style="margin-top: 3%;"> <div class="item active"><img class="img-responsive center-block imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div> <div class="item"><img class="img-responsive center-block imageslidesize" src="../Images/02.JPG" alt="Second Slide"/></div> </div> </div> <!-- Carousel controls --> <a class="carousel-control left" href="#myCarousel3" style="background:none;color:black;" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="carousel-control right" href="#myCarousel3" style="background:none;color:black;" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> 

Answer 1

如果要将猫头鹰传送带带入选项卡，则应为每个具有相同class =“ owl-carousel”的猫头鹰传送带赋予相同的ID 。

工作示例： https : //codepen.io/manektech/pen/XGagBe

的HTML

<div class="container">
  <div class="row">
    <div class="col-xs-12">

      <div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
          <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">
                <div id="owl-example" class="owl-carousel">
                  <div> <img src="https://www.fillmurray.com/640/360"> </div>
                  <div> <img src="https://www.fillmurray.com/640/360">  </div>
                  <div> <img src="https://www.fillmurray.com/640/360">  </div>
                  <div> <img src="https://www.fillmurray.com/640/360">  </div>
                  <div> <img src="https://www.fillmurray.com/640/360">  </div>
                  <div><img src="https://www.fillmurray.com/640/360">  </div>
                  <div> <img src="https://www.fillmurray.com/640/360">  </div>
                </div>    
          </div>
          <div role="tabpanel" class="tab-pane" id="profile">
            <div id="owl-example" class="owl-carousel">
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                </div> 
          </div>
        </div>

      </div>

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

的JavaScript

 jQuery(document).ready(function() {
      jQuery(".owl-carousel").owlCarousel();
    });

工作示例： https : //codepen.io/manektech/pen/XGagBe