Design of BOOTSTRAP3 's responsive thumbnail slide-carousel effect

• Online Demo 1

• Local Downloads

Html

<divClass="Container"><divClass="Col-md-12">Bootstrap 3 thumbnail Slide gallery effect</div></div><divClass="Container"><!--main slider Carousel-- <divClass="Row"><divClass="Col-md-12"Id="Slider"><divClass="Col-md-12"Id="Carousel-bounding-box"><divId="Mycarousel"Class="Carousel Slide"><!--main slider carousel Items--<divClass="Carousel-inner"><divClass="Active Item"Data-slide-number="0">Src="Http://www.gbtags.com/gb/laitu/1200x480&amp;text=1"Class="Img-responsive"></div><divClass="Item"Data-slide-number="1">Src="Http://www.gbtags.com/gb/laitu/1200x480&amp;text=2"Class="Img-responsive"></div><divClass="Item"Data-slide-number="2">Src="Http://www.gbtags.com/gb/laitu/1200x480&amp;text=3"Class="Img-responsive"></div><divClass="Item"Data-slide-number="3">Src="Http://www.gbtags.com/gb/laitu/1200x480&amp;text=4" Class="Img-responsive"></div><divClass="Item"Data-slide-number="4">Src="Http://www.gbtags.com/gb/laitu/1200x480&amp;text=5"Class="Img-responsive"> </div> <div class= "Item"  data-slide-number= "5" >  </div> < Div class= "Item"  data-slide-number= "6" >  </div> <div class=" Item "  data-slide-number= "7" >  </div> </div> <!-- main slider  carousel nav controls -->  <a class= "Carousel-control left"  href = "#myCarousel"  data-slide= "prev" >‹</a>  <a class= "Carousel-control right"  href= "#myCarousel"  data-slide= "Next" >›</a> </div> </div>   </div> </div> <!--/main slider carousel-->  <div class= "Row" > < div class= "col-md-12" > <!-- thumb navigation carousel --> <div  class= "Col-md-12 hidden-sm hidden-xs"  id= "Slider-thumbs" >  <!--  thumb navigation carousel items --> <ul class= "List-inline" > < Li> <a id= "carousel-selector-0"  class= "selected" >  </a> </li> <li> <a id= "carousel-selector-1" >  </a> </li> <li> <a id= "carousel-selector-2" >  </a></li> <li> <a  Id= "carousel-selector-3" >  </a></li> <li> <a id=" Carousel-selector-4 ">  </a></li> <li> <a id=" Carousel-selector-5 ">  </a></li> <li> <a id=" Carousel-selector-6 ">  </a></li> <li> <a id=" Carousel-selector-7 ">  </ A></li> </ul> </div> </div> </div>  </div >

Javascript

$(' #myCarousel ').Carousel({Interval: 4000 });$(' [id^=carousel-selector-] ').Click( function(){ VarId_selector=$(This).attr("id"); VarId=Id_selector.Substr(Id_selector.Length-1);Id=parseint(Id);$(' #myCarousel ').Carousel(Id);$(' [id^=carousel-selector-] ').Removeclass(' Selected ');$(This).AddClass(' Selected '); });$(' #myCarousel ').On(' Slid ', function (E) { VarId=$('. Item.active 'data ( ' slide-number ' = Parseint (id $ ( [id^=carousel-selector-] '  ' selected '  $  ( "[id=carousel-selector-' +id + '] ' ). addclass ( ' selected '                

From: http://www.gbtags.com/gb/share/4368.htm

Design of BOOTSTRAP3 's responsive thumbnail slide-carousel effect