#javascript #twitter-bootstrap #twitter-bootstrap-3 #bootstrap-4 #react-bootstrap
#javascript #twitter-bootstrap #twitter-bootstrap-3 #bootstrap-4 #реакция-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>
Ответ №1:
Если вы хотите перенести owl-carousel на вкладку, то вы должны предоставить одинаковые идентификаторы каждой owl carousel с одинаковым 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
Комментарии:
1. Не повезло. Я пробовал эту owl-carousel. Есть ли какой-либо способ запускать ползунок (Carousel) по отдельности, когда выбрана вкладка.
2. Вы проверили скрипку?