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

引导程序塔板和轮播问题

1 个答案: