How to combine tabs and carousel functionality in bootstrap?

Question

There is a non-adaptive combined carousel with tabs, which switches content both by tabs and by arrows, but this solution has an adaptive problem, so you are wondering how you can bootsrap it into the bootsrap grid bootsrap ? Feedl

 var CAROUSEL = { id: 0, width: 500, length: 0, ready: function() { var self = jQuery('#panels'); var plane = self.find('.panels-ul'); CAROUSEL.length = plane.find('.panels-li').length; plane.width(CAROUSEL.length * (CAROUSEL.width + 10) + 100); $('#tabs .tab:first').show(); $('#types-menu .group a').click(function(e) { var index = $('#types-menu .group a').index(this); plane.animate({ 'left': -(CAROUSEL.width * index) }, 'slow'); CAROUSEL.id = index; CAROUSEL.resetDisable(); return false; }); self.find('.arrow.arg').click(function() { if (CAROUSEL.id < 6) { plane.animate({ 'left': '-=' + CAROUSEL.width + 'px' }, 'slow'); CAROUSEL.id++; CAROUSEL.resetDisable(); } return false; }); self.find('.arrow.alf').click(function() { if (CAROUSEL.id > 0) { plane.animate({ 'left': '+=' + CAROUSEL.width + 'px' }, 'slow'); CAROUSEL.id--; CAROUSEL.resetDisable(); } return false; }); CAROUSEL.resetDisable(); }, resetDisable: function() { $('.arrow.alf, .arrow.arg').removeClass('disable'); $('#tabs .tab').hide().eq(CAROUSEL.id).show(); $('.backline span font').text($('#types-menu .group a').eq(CAROUSEL.id).text()); if (CAROUSEL.id == 0) $('.arrow.alf').addClass('disable'); else if (CAROUSEL.id == 6) $('.arrow.arg').addClass('disable'); $('#types-menu .group a').removeClass('active').eq(CAROUSEL.id).addClass('active'); } }; $(function() { CAROUSEL.ready(); });

 #types .desc { margin: 0 auto; width: 500px; overflow: hidden; margin-bottom: 40px; } #types .desc .image { float: left; } #types .desc span { display: block; margin-left: 129px; padding: 14px 0 0 0; } #types .desc h3 { font-size: 18px; line-height: 22px; margin-bottom: 4px; font-weight: bold; } #panels { width: 500px; margin: 0 auto; position: relative; height: 60px; margin-bottom: 20px; } #panels .panels { width: 500px; height: 60px; overflow: hidden; position: relative; } #panels .panels .panels-ul { margin: 0; list-style: none; height: 60px; position: absolute; width: 5000px; overflow: hidden; top: 0; left: 0; } #panels .panels .panels-ul .panels-li { width: 500px; height: 60px; float: left; } #panels .panels .panels-ul li { float: left; margin-left: 10px; line-height: 0; position: relative; } #panels .panels .panels-ul .panels-li li:first-child { margin: 0; } #panels .arrow { position: absolute; cursor: pointer; top: 30px; } #panels .arrow.alf { background: url(http://www.muenzmanufaktur.com/images/main/sl_prev.png) no-repeat; height: 64px; width: 64px; left: -60px; } #panels .arrow.arg { background: url(http://www.muenzmanufaktur.com/images/main/sl_next.png) no-repeat; height: 64px; width: 64px; right: -60px; } #panels .arrow.alf.disable { background-position: left top; } #panels .arrow.arg.disable { background-position: right top; } #types h2 { margin-bottom: 10px; } #types-menu { text-align: center; font-size: 18px; margin-bottom: 20px; } #types-menu .group { list-style: none; display: inline-block; margin-left: -30px; } #types-menu .group li { float: left; margin-left: 30px; } #types-menu .group li a { color: #20478d; border-bottom: 1px dotted #20478d; text-decoration: none; } #types-menu .group li a:hover { color: #28262d; border-bottom: none; } #types-menu .group li a.active { color: #28262d; font-weight: bold; border-bottom: none; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <section id="types"> <div id="types-menu"> <ul class="group"> <li><a href="index.html#" class="active">1</a> </li> <li><a href="index.html#">2</a> </li> <li><a href="index.html#">3</a> </li> <li><a href="index.html#">4</a> </li> <li><a href="index.html#">5</a> </li> </ul> </div> <div id="panels"> <div class="panels"> <ul class="panels-ul"> <div class="panels-li"> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> </div> <div class="panels-li"> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> </div> <div class="panels-li"> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> </div> <div class="panels-li"> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> </div> <div class="panels-li"> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> <li> <img src="https://placehold.it/50x50"> </li> </div> </ul> </div> <div class="arrow alf disable"></div> <div class="arrow arg"></div> </div> <div id="tabs"> <div class="desc tab"> <span><h3>название 1</h3>текст</span> </div> <div class="desc tab"> <span><h3>название 2</h3>текст</span> </div> <div class="desc tab"> <span><h3>название 3</h3>текст</span> </div> <div class="desc tab"> <span><h3>название 4</h3>текст</span> </div> <div class="desc tab"> <span><h3>название 5</h3>текст</span> </div> </div> </section>

greybutton greybutton 1,163 one four 12 · Accepted Answer · 2016-11-01T03:56:20

Here, for some reason, it gives an error, but jsfiddle works. If this is what is needed and something is not clear, then I am ready to answer your questions.

 $(document).ready(function() { var tabs = Array.prototype.slice.call(document.querySelector(".nav").children, 0); $('.glyphicon').on('click', function(e) { var event = jQuery.Event('click'); tabs.forEach(function(item) { if ( $(item).hasClass('active') ) { var id = parseInt( item.getAttribute('data-slide-to') ); if ( $(e.target).hasClass('glyphicon-chevron-left') ) { if (id == 0) { id = tabs.length-1; } else { id -= 1; } } if ( $(e.target).hasClass('glyphicon-chevron-right') ) { if (id == tabs.length-1) { id = 0; } else { id += 1; } } var elem = '.js-link-' + id; jQuery(elem).trigger(event); } }); }); });

 .item { background: lightblue; } .carousel { margin-top: 40px; } .carousel-indicators { top: -40px; bottom: 0; } .carousel-indicators li { margin: 0; border: none; text-indent: 0; padding: 0 15px; width: 0; height: 0; } .carousel-indicators .active { width: 0; height: 0; } .carousel-indicators li a { width: 38px; } .carousel-control { width: 0%; } .glyphicon { color: grey; } .carousel-control .glyphicon-chevron-left { margin-left: 10px; top: 20px; } .carousel-control .glyphicon-chevron-right { margin-right: 10px; top: 20px; } @media screen and (min-width: 768px) { .carousel-control .glyphicon-chevron-left { margin-left: 10px; top: 50%; } .carousel-control .glyphicon-chevron-right { margin-right: 10px; top: 50%; } }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval=""> <!-- Indicators --> <ol class="carousel-indicators nav nav-pills nav-justified"> <li data-target="#myCarousel" data-slide-to="0" class="active"> <a data-toggle="pill" class="js-link js-link-0" href="#1">1</a> </li> <li data-target="#myCarousel" data-slide-to="1"> <a data-toggle="pill" class="js-link js-link-1" href="#2">2</a> </li> <li data-target="#myCarousel" data-slide-to="2"> <a data-toggle="pill" class="js-link js-link-2" href="#3">3</a> </li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://placehold.it/50x50"> <img src="https://placehold.it/50x50"> <img src="https://placehold.it/50x50"> <img src="https://placehold.it/50x50"> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <img src="https://placehold.it/50x50"> <img src="https://placehold.it/50x50"> </div> <div class="item"> <img src="https://placehold.it/50x50"> <img src="https://placehold.it/50x50"> <img src="https://placehold.it/50x50"> <div class="carousel-caption"> <h3>Flowers</h3> <p>Beatiful flowers in Kolymbari, Crete.</p> </div> </div> </div> </div> <div class="tab-content"> <div id="1" class="tab-pane fade in active"> <h3>Menu 1</h3> <p>Some content in menu 1.</p> </div> <div id="2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Some content in menu 2.</p> </div> <div id="3" class="tab-pane fade"> <h3>Menu 3</h3> <p>Some content in menu 3.</p> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Thanks for trying to figure it out, I slightly corrected your decision for my version of jsfiddle.net/cmaxm854/1, it turned out like this, jsfiddle.net/tsg54995/1 jerky?
let's bring this puzzle to the end together and I will mark the answer as correct
Standard bootstrap, in the slide change did not make any changes.
I mean, when changing the slide, the description in the description twitches with attenuation here jsfiddle.net/tsg54995/1 which is not observed here jsfiddle.net/cmaxm854/1
This was because of the standard animation class of tabs .fade in .tab-content here removed it jsfiddle.net/tsg54995/2 If you do not need the text in the carousel, it is better to delete .carousel-caption with its contents.

How to combine tabs and carousel functionality in bootstrap?

1 answer 1

More articles: