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&text=1"Class="Img-responsive"></div><divClass="Item"Data-slide-number="1">Src="Http://www.gbtags.com/gb/laitu/1200x480&text=2"Class="Img-responsive"></div><divClass="Item"Data-slide-number="2">Src="Http://www.gbtags.com/gb/laitu/1200x480&text=3"Class="Img-responsive"></div><divClass="Item"Data-slide-number="3">Src="Http://www.gbtags.com/gb/laitu/1200x480&text=4" Class="Img-responsive"></div><divClass="Item"Data-slide-number="4">Src="Http://www.gbtags.com/gb/laitu/1200x480&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