вкладка начальной загрузки и проблема с каруселью

У меня есть вопрос. У меня есть три разных вкладки Bootstrap. На каждой вкладке есть разные элементы карусели. Я хотел бы активировать карусель при выборе вкладки. в настоящее время он активируется при загрузке страниц. Когда я выбираю третью вкладку, она достигает почти середины карусели. Может ли кто-нибудь помочь мне в этом. Я думаю, мы можем активировать его с помощью 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>

Rp Prakash 10.03.2019 источник

Ответы (1)

arrow_upward
0
arrow_downward

Если вы хотите перенести owl-carousel на вкладку, вы должны указать одинаковые идентификаторы для каждой owl-карусели с одним и тем же class="owl-carousel".

Рабочий пример: 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< /а>

Mayank Dudakiya 11.03.2019

comment

Неудачно. Я пробовал эту сову-карусель. Есть ли способ запустить ползунок (карусель) по отдельности, когда выбрана вкладка. - Rp Prakash; 12.03.2019

comment

Вы проверили скрипку? - Mayank Dudakiya; 12.03.2019

вкладка начальной загрузки и проблема с каруселью

Ответы (1)

Похожие вопросы