<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"> <!-- Slider --> <div class="row"> <div class="col-xs-12" id="slider"> <!-- Top part of the slider --> <div class="row"> <div class="col-sm-3" 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/200x300&text=one"></div> <div class="item" data-slide-number="1"> <img src="http://placehold.it/200x300&text=two"></div> <div class="item" data-slide-number="2"> <img src="http://placehold.it/200x300&text=three"></div> <div class="item" data-slide-number="3"> <img src="http://placehold.it/200x300&text=four"></div> <div class="item" data-slide-number="4"> <img src="http://placehold.it/200x300&text=five"></div> <div class="item" data-slide-number="5"> <img src="http://placehold.it/200x300&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-9" 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">A mechanical engineer by vocation, Ravi took on the mantle of spearheading the growth and success of NetRack. He brings with him a wealth of hands on experience in the field of marketing and domain expertise in high end technologically advanced products. He is responsible for regularizing and ensuring the smooth functioning of the company.<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 2014 - <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 2014 - <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 2014 - <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 2014 - <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 2014 - <a href="#">Read more</a></p> </div> </div> </div> </div> </div><!--/Slider--> </div> </div>

.hide-bullets { list-style:none; margin-left: -40px; margin-top:20px; }

jQuery(document).ready(function($) { $('#myCarousel').carousel({ interval: 5000 }); $('#carousel-text').html($('#slide-content-0').html()); //Handles the carousel thumbnails $('[id^=carousel-selector-]').click( function(){ var id = this.id.substr(this.id.lastIndexOf("-") + 1); var id = parseInt(id); $('#myCarousel').carousel(id); }); // When the carousel slides, auto update the text $('#myCarousel').on('slid.bs.carousel', function (e) { var id = $('.item.active').data('slide-number'); $('#carousel-text').html($('#slide-content-'+id).html()); }); });