"Slider"
Bootstrap 3.3.0 Snippet by Creativpur

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="main_area"> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="well well-sm"> <div class="row"> <div class="col-sm-6 col-md-4" align="center" style="padding-top:30px; height:300px;"> <div class="col-xs-12" id="slider"> <!-- Top part of the slider --> <div class="row"> <div class="col-sm-12" id="carousel-bounding-box" style="height:210px; margin-left:-10px;"> <div class="carousel slide" id="myCarousel11"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item" data-slide-number="0"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Manhattan Uni 490.png"></a> </div> <div class="item" data-slide-number="1"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Manhattan 49P.jpg"></a> </div> <div class="item" data-slide-number="2"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Artwood 22N.jpg"></a> </div> <div class="item" data-slide-number="3"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Feel 96B.jpg"></a> </div> <div class="item" data-slide-number="4"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/LUX 368.jpg"></a> </div> <div class="item" data-slide-number="5"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Stone 265.jpg"></a> </div> <div class="item" data-slide-number="6"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Linea 971.jpg"></a> </div> <div class="item" data-slide-number="7"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Montreal 501.png"></a> </div> <div class="item" data-slide-number="8"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Nappa 38G.jpg"></a> </div> <div class="item" data-slide-number="9"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Soft Lack 76M.png"></a> </div> <div class="item" data-slide-number="10"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Spot 18S.png"></a> </div> <div class="item" data-slide-number="11"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Trend Lack 41B.jpg"></a> </div> <div class="item" data-slide-number="12"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Venta 912.png"></a> </div> <div class="item" data-slide-number="13"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Alpha Lack 558.png"></a> </div> <div class="item" data-slide-number="14"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Corona 19Q.jpg"></a> </div> <div class="item" data-slide-number="15"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Sigma Lack D01.jpg"></a> </div> <div class="item" data-slide-number="16"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Vienna 46K.png"></a> </div> <div class="item" data-slide-number="17"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Carisma Lack B12.png"></a> </div> <div class="item" data-slide-number="18"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Frame Lack A05.png"></a> </div> <div class="item" data-slide-number="19"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Nova Lack 73N.jpg"></a> </div> <div class="item" data-slide-number="20"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Portland 404.jpg"></a> </div> <div class="item" data-slide-number="21"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Windsor Lack 72Z.jpg"></a> </div> <div class="item" data-slide-number="22"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Elegance 340.jpg"></a> </div> <div class="item" data-slide-number="23"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Glas Tec Plus 16S.jpg"></a> </div> <div class="item" data-slide-number="24"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Glas Tec Satin 17W.jpg"></a> </div> <div class="item" data-slide-number="25"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Nature 565.jpg"></a> </div> <div class="item" data-slide-number="26"> <a href="#"><img src="http://www.meine-nolte-kueche.de/preisgruppen/fronten/Legno 59M.jpg"></a> </div> </div> <!-- Carousel nav --> <a class="left carousel-control" href="#myCarousel11" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" style="font-size:9px; margin-top:80px;"></span> </a> <a class="right carousel-control" href="#myCarousel11" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" style="font-size:9px; margin-top:80px;"></span> </a> </div> </div> </div> </div> </div> <div class="col-sm-6 col-md-8"> <h4 style="margin-left:-20px;"> Fronten </h4> <small><cite> <div class="col-sm-6-md-8" id="slider-thumbs" style="color:#999; margin-left:-20px;"> <a style="color:#999; font-size:10px;" id="carousel-selector-0">Manhattan uni </a> <a style="color:#999; font-size:10px;" id="carousel-selector-1"> Manhattan </a> <a style="color:#999; font-size:10px;" id="carousel-selector-2"> Artwood </a> <a style="color:#999; font-size:10px;" id="carousel-selector-3"> Feel </a> <a style="color:#999; font-size:10px;" id="carousel-selector-4"> Lux </a> <a style="color:#999; font-size:10px;" id="carousel-selector-5"> Stone </a> <a style="color:#999; font-size:10px;" id="carousel-selector-6"> Linea </a> <a style="color:#999; font-size:10px;" id="carousel-selector-7"> Montreal </a> <a style="color:#999; font-size:10px;" id="carousel-selector-8"> Nappa </a> <a style="color:#999; font-size:10px;" id="carousel-selector-9"> Softlack </a> <a style="color:#999; font-size:10px;" id="carousel-selector-10"> Spot </a> <a style="color:#999; font-size:10px;" id="carousel-selector-11"> Trent Lack </a> <a style="color:#999; font-size:10px;" id="carousel-selector-12"> Venta </a> <a style="color:#999; font-size:10px;" id="carousel-selector-13"> Alpha Lack </a> <a style="color:#999; font-size:10px;" id="carousel-selector-14"> Corona </a><br /> <a style="color:#999; font-size:10px;" id="carousel-selector-15"> Sigma Lack </a> <a style="color:#999; font-size:10px;" id="carousel-selector-16"> Vienna </a> <a style="color:#999; font-size:10px;" id="carousel-selector-17"> Carisma Lack </a> <a style="color:#999; font-size:10px;" id="carousel-selector-18"> Frame Lack </a> <a style="color:#999; font-size:10px;" id="carousel-selector-19"> Nova Lack </a> <a style="color:#999; font-size:10px;" id="carousel-selector-20"> Portland </a> <a style="color:#999; font-size:10px;" id="carousel-selector-21"> Windsor Lack </a> <a style="color:#999; font-size:10px;" id="carousel-selector-22"> Elegance </a> <a style="color:#999; font-size:10px;" id="carousel-selector-23"> Glas Tec Plus </a> <a style="color:#999; font-size:10px;" id="carousel-selector-24"> Glas Tec Satin </a> <a style="color:#999; font-size:10px;" id="carousel-selector-25"> Nature </a> <a style="color:#999; font-size:10px;" id="carousel-selector-26"> Legno </a> </div> </div> </cite></small> <br /><br /><br /><br /><br /> <hr style="width:65%; margin-left:-10px;" /> <p style="font-size:12px;"> Info </p> </div> </div> </div> </div> </div>
.hide-bullets { list-style:none; margin-left: -40px; margin-top:20px; } .thumbnail { padding: 0; } .carousel-inner>.item>img, .carousel-inner>.item>a>img { width: 100%; }
jQuery(document).ready(function($) { $('#myCarousel11').carousel({ interval: 5000 }); //Handles the carousel thumbnails $('[id^=carousel-selector-]').click(function () { var id_selector = $(this).attr("id"); try { var id = /-(\d+)$/.exec(id_selector)[1]; console.log(id_selector, id); jQuery('#myCarousel11').carousel(parseInt(id)); } catch (e) { console.log('Regex failed!', e); } }); // When the carousel slides, auto update the text $('#myCarousel11').on('slid.bs.carousel', function (e) { var id = $('.item.active').data('slide-number'); $('#carousel-text').html($('#slide-content-'+id).html()); }); });

Related: See More


Questions / Comments: