html - How to create a bootstrap carousel with both carousel thumbnails at bottom and carousel caption on right -
i creating bootstrap carousel using bootstrap 3x. want have 2 divs 1 (col-md-9) big image , 1 (col-md-3) displaying respective carousel caption. want have thumbnail @ bottom (col-md-12).
currently, able display carousel thumbnail when try add div carousel's caption don't fit wanted.
my codes current
<div class="container"> <div class ="row"> <!--carousel--> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div id="carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner "> <div class="item active "> <img class="image" src="img/construction.jpg"> </div><!-- /item --> <div class="item"> <img class="image" src="img/scaffolding.jpg"> </div> <div class="item"> <img class="image" src="img/construction-iron.jpg"> </div> <div class="item"> <img class="image" src="img/bridge-construction-swale-bridge.jpg"> </div> <div class="item"> <img class="image" src="img/industrial-building-construction-scaffolding.jpg"> </div> <div class="item"> <img class="image" src="img/men-at-building-construction.jpg"> </div> <div class="item"> <img class="image" src="img/construction-workers.jpg"> </div> <div class="item"> <img class="image" src="img/building-construction.jpg"> </div> </div> </div> </div> <!-- /col-sm-6 --> </div> <div class ="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="clearfix"> <div id="thumbcarousel" class="carousel slide" data-interval="false"> <div class="carousel-inner"> <div class="item active"> <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/bridge-construction-swale-bridge.jpg" width="100" height="100"></div> </div><!-- /item --> <div class="item"> <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/construction-workers.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.jpg" width="100" height="100"></div> </div><!-- /item --> </div><!-- /carousel-inner --> <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <!-- /thumbcarousel --> </div><!-- /clearfix --> </div> <!-- /col-sm-6 --> </div> <!-- /.carousel --> </div><!--/.container--> try 1 caption problem following caption's text don't appear
<div class="container"> <div class ="row"> <!--carousel--> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div id="carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner "> <div class="item active"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/construction.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3"> <div class="carousel-caption"> <h1>welcome our site! 5a4ukoc9vurkjkvhtbagi7</h1> <p>take around , let know if have questions.</p> </div><!-- carousal-caption --> </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 --> </div><!-- /item --> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/scaffolding.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/construction-iron.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/bridge-construction-swale-bridge.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/industrial-building-construction-scaffolding.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/men-at-building-construction.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/construction-workers.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/building-construction.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> </div> </div> </div> </div> <!-- /col-sm-6 --> </div> <div class ="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="clearfix"> <div id="thumbcarousel" class="carousel slide" data-interval="false"> <div class="carousel-inner"> <div class="item active"> <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/bridge-construction-swale-bridge.jpg" width="100" height="100"></div> </div><!-- /item --> <div class="item"> <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/construction-workers.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.jpg" width="100" height="100"></div> </div><!-- /item --> </div><!-- /carousel-inner --> <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <!-- /thumbcarousel --> </div><!-- /clearfix --> </div> <!-- /col-sm-6 --> </div> <!-- /.carousel --> </div><!--/.container--> try 2 caption
the problem following caption's text don't appear on big screen , appear on big image div when browser smaller
<div class="container"> <div class ="row"> <!--carousel--> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div id="carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner "> <div class="item active "> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/construction.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3"> <div class="carousel-caption"> <h1>welcome our site! 5a4ukoc9vurkjkvhtbagi7</h1> <p>take around , let know if have questions.</p> </div><!-- carousal-caption --> </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 --> </div><!-- /item --> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/scaffolding.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3"> <div class="carousel-caption"> <h1>welcome our site2!</h1> <p>take around , let know if have questions.</p> </div><!-- carousal-caption --> </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/construction-iron.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3"> <div class="carousel-caption"> <h1>welcome our site!</h1> <p>take around , let know if have questions.</p> </div><!-- carousal-caption --> </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/bridge-construction-swale-bridge.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3"> <div class="carousel-caption"> <h1>welcome our site!</h1> <p>take around , let know if have questions.</p> </div><!-- carousal-caption --> </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/industrial-building-construction-scaffolding.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3"> <div class="carousel-caption"> <h1>welcome our site!</h1> <p>take around , let know if have questions.</p> </div><!-- carousal-caption --> </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/men-at-building-construction.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3"> <div class="carousel-caption"> <h1>welcome our site!</h1> <p>take around , let know if have questions.</p> </div><!-- carousal-caption --> </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/construction-workers.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3"> <div class="carousel-caption"> <h1>welcome our site!</h1> <p>take around , let know if have questions.</p> </div><!-- carousal-caption --> </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 --> </div> <div class="item"> <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <img class="image" src="img/building-construction.jpg"> </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 --> <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3"> <div class="carousel-caption"> <h1>welcome our site!</h1> <p>take around , let know if have questions.</p> </div><!-- carousal-caption --> </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 --> </div> </div> </div> </div> <!-- /col-sm-6 --> </div> <div class ="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="clearfix"> <div id="thumbcarousel" class="carousel slide" data-interval="false"> <div class="carousel-inner"> <div class="item active"> <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/bridge-construction-swale-bridge.jpg" width="100" height="100"></div> </div><!-- /item --> <div class="item"> <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/construction-workers.jpg" width="100" height="100"></div> <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.jpg" width="100" height="100"></div> </div><!-- /item --> </div><!-- /carousel-inner --> <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <!-- /thumbcarousel --> </div><!-- /clearfix --> </div> <!-- /col-sm-6 --> </div> <!-- /.carousel --> </div><!--/.container-->
i've made fork the example gave you.
html:
<div class="container"> <div id="main_area"> <!-- slider --> <div class="row"> <div class="col-xs-12" id="slider"> <!-- top part of slider --> <div class="row"> <div class="col-sm-8" id="carousel-bounding-box"> <div class="carousel slide" id="mycarousel"> <!-- carousel items --> <div class="carousel-inner"> <div class="active item" data-slide-number="0"> <img src="http://placehold.it/770x300&text=one"></div> <div class="item" data-slide-number="1"> <img src="http://placehold.it/770x300&text=two"></div> <div class="item" data-slide-number="2"> <img src="http://placehold.it/770x300&text=three"></div> <div class="item" data-slide-number="3"> <img src="http://placehold.it/770x300&text=four"></div> <div class="item" data-slide-number="4"> <img src="http://placehold.it/770x300&text=five"></div> <div class="item" data-slide-number="5"> <img src="http://placehold.it/770x300&text=six"></div> </div><!-- carousel nav --> <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <div class="col-sm-4" id="carousel-text"></div> <div id="slide-content" style="display: none;"> <div id="slide-content-0"> <h2>slider one</h2> <p>lorem ipsum dolor</p> <p class="sub-text">october 24 2012 - <a href="#">read more</a></p> </div> <div id="slide-content-1"> <h2>slider two</h2> <p>lorem ipsum dolor</p> <p class="sub-text">october 24 2012 - <a href="#">read more</a></p> </div> <div id="slide-content-2"> <h2>slider three</h2> <p>lorem ipsum dolor</p> <p class="sub-text">october 24 2012 - <a href="#">read more</a></p> </div> <div id="slide-content-3"> <h2>slider four</h2> <p>lorem ipsum dolor</p> <p class="sub-text">october 24 2012 - <a href="#">read more</a></p> </div> <div id="slide-content-4"> <h2>slider five</h2> <p>lorem ipsum dolor</p> <p class="sub-text">october 24 2012 - <a href="#">read more</a></p> </div> <div id="slide-content-5"> <h2>slider six</h2> <p>lorem ipsum dolor</p> <p class="sub-text">october 24 2012 - <a href="#">read more</a></p> </div> </div> </div> </div> </div><!--/slider--> <div class="row hidden-xs" id="slider-thumbs"> <!-- bottom switcher of slider --> <ul class="hide-bullets"> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a> </li> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a> </li> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a> </li> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a> </li> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a> </li> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/170x100&text=six"></a> </li> </ul> </div> </div> </div> css:
.hide-bullets { list-style:none; margin-left: -40px; margin-top:20px; } js:
jquery(document).ready(function($) { $('#mycarousel').carousel({ interval: 5000 }); $('#carousel-text').html($('#slide-content-0').html()); //handles carousel thumbnails $('[id^=carousel-selector-]').click( function(){ var id_selector = $(this).attr("id"); var id = id_selector.substr(id_selector.length -1); var id = parseint(id); $('#mycarousel').carousel(id); }); // when carousel slides, auto update text $('#mycarousel').on('slid.bs.carousel', function (e) { var id = $('.item.active').data('slide-number'); $('#carousel-text').html($('#slide-content-'+id).html()); }); }); functional bootply: http://www.bootply.com/zaktdsh6v4
Comments
Post a Comment