"thumbnail slide"
Bootstrap 3.3.0 Snippet by evarevirus

<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 ----------> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'> <div id="wrapper"> <div class="title"> <h1>World of Animals</h1> <h2>Custom Slider by <a href="http://andrecortellini.com" target="_blank">André Cortellini</a></h2> </div> <div id="slider-wrap"> <ul id="slider"> <li class="active"> <div class="img"> <img src="http://lorempixel.com/320/160/animals/8"> </div> <div class="content"> <h2>World of dogs</h2> <div class="rating"> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star"></span> <span class="review-count">1,499 reviews</span> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta mi non accumsan facilisis. Lorem ipsum dolor sit amet.</p> <div class="btn">Play!</div> </div> </li> <li> <div class="img"> <img src="http://lorempixel.com/320/160/animals/10"> </div> <div class="content"> <h2>A horse whinnies</h2> <div class="rating"> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="review-count">1,102 reviews</span> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta mi non accumsan facilisis. Lorem ipsum dolor sit amet.</p> <div class="btn">Rate!</div> </div> </li> <li> <div class="img"> <img src="http://lorempixel.com/320/160/animals/3"> </div> <div class="content"> <h2>A tiger's day</h2> <div class="rating"> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star"></span> <span class="review-count">3,581 reviews</span> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta mi non accumsan facilisis. Lorem ipsum dolor sit amet.</p> <div class="btn">Download!</div> </div> </li> <li> <div class="img"> <img src="http://lorempixel.com/320/160/animals/4"> </div> <div class="content"> <h2>Necky giraffe attacks</h2> <div class="rating"> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="review-count">722 reviews</span> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta mi non accumsan facilisis. Lorem ipsum dolor sit amet.</p> <div class="btn">Get!</div> </div> </li> <li> <div class="img"> <img src="http://lorempixel.com/320/160/animals/7"> </div> <div class="content"> <h2>Cat rules</h2> <div class="rating"> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="review-count">1,156 reviews</span> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta mi non accumsan facilisis. Lorem ipsum dolor sit amet.</p> <div class="btn">Buy!</div> </div> </li> </ul> <!--controls--> <div class="btns" id="next"><i class="fa fa-angle-right"></i></div> <div class="btns" id="previous"><i class="fa fa-angle-left"></i></div> <!--controls--> </div> </div> <script> $(document).ready(function(){ var pos = 0; var totalSlides = $('#slider-wrap ul li').length; var sliderWidth = $('#slider-wrap').width(); /***************** BUILD THE SLIDER ****************/ $('#slider-wrap ul').width(sliderWidth*totalSlides); /*NEXT SLIDE*/ $('#next').click(function(){ var p = 90; pos++; $('.btns#previous').fadeIn(100); if(pos==totalSlides){ pos = 0; p = 0; $('.btns#previous').fadeOut(100); } if(pos==totalSlides-1){ p = 180; $('.btns#next').fadeOut(100); }else{ $('.btns#next').fadeIn(100); } $('#slider-wrap ul#slider').animate({ left: -(330*pos-p) }, { duration: 800, easing: 'easeOutBounce' }); newpos = pos+1; $('#slider-wrap ul li').removeClass('active'); $('#slider-wrap ul li:nth-child('+newpos+')').addClass('active'); }); /*PREVIOUS SLIDE*/ $('#previous').click(function(){ var p = 90; pos--; if(pos==-1){ pos = totalSlides-1; p = 180; } if(pos==0){ p = 0; $('.btns#previous').fadeOut(100); } $('#slider-wrap ul#slider').animate({ left: -(330*pos-p) }, { duration: 800, easing: 'easeOutBounce' }); $('.btns#next').fadeIn(100); newpos = pos+1; $('#slider-wrap ul li').removeClass('active'); $('#slider-wrap ul li:nth-child('+newpos+')').addClass('active'); }); /*AUTO SLIDE*/ var autoSlider = setInterval(function() { $('.btns#next').trigger('click'); }, 3000); $('#slider-wrap').hover( function(){ clearInterval(autoSlider); }, function(){ autoSlider = setInterval(function() { $('.btns#next').trigger('click'); }, 3000); } ); });//DOCUMENT READY </script>
/*GLOBALS*/ *{margin:0; padding:0; list-style:none;} a{ text-decoration:none; color:#1783bb; } a:hover{ color:#116d9c; } body, hmtl{ background: #eaeaea; font-family: 'Lilita One', cursive; } #wrapper{ width:100%; max-width:520px; margin:100px auto; } /*TITLE*/ .title{ width:560px; background:#fff; margin-left:-20px; position:relative; margin-bottom:20px; text-align:center; padding:10px 0; border-radius:2px; } .title:before, .title:after{ z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 20%; background: #ccc; -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0 15px 10px rgba(0,0,0,0.2); box-shadow: 0 15px 10px rgba(0,0,0,0.2); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .title:after{ -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } .title h1{ color:#444; } .title h2{ font-family: 'Questrial', sans-serif; font-size:16px; color:#999; margin-top:6px; } /*SLIDER*/ #slider-wrap{ width:100%; height:350px; overflow:hidden; background:#ccc; position:relative; } ul#slider{ width:100%; height:100%; position:absolute; top:0; left:0; } ul#slider li{ width:320px; height:330px; margin-top:10px; margin-left:10px; border-radius:2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float:left; background:#fff; box-shadow:rgba(0,0,0,0.3) 0px 0px 5px; opacity:0.5; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; padding:10px; } ul#slider li.active{ opacity:1; } ul#slider li:first-child{ margin-left:10px; } .btns{ position:absolute; top:50%; width:10px; height:50px; margin-top:-25px; background:blue; color:#666; line-height:50px; padding: 0 10px; text-align:center; background:#fff; box-shadow:rgba(0,0,0,0.3) 0px 0px 5px; cursor:pointer; font-size:21px; } .btns#next{ right:0; border-radius:30px 0 0 30px; padding-right: 5px; } .btns#previous{ left:0; border-radius:0 30px 30px 0; padding-left: 5px; display:none; } .btns:active{ color:#1783bb; box-shadow:rgba(0,0,0,0.3) 0px 0px 8px inset; } /*Content*/ .img{ height:145px; overflow:hidden; margin-bottom:10px; } .img img{ width:100%; } .content h2{ font-size:21px; margin-bottom:3px; color:#444; } .content .rating{ color:#ccc; } .content .rating .rated{ color:#1783bb; } .content .review-count{ font-family: 'Questrial', sans-serif; font-size:11px; padding-left:6px; color:#999; } .content p{ font-family: 'Questrial', sans-serif; color:#666; font-size:14px; margin:10px 0; line-height:1.3; } .content .btn{ text-align:center; color:#fff; padding:8px 15px; background: #1783bb; text-transform:uppercase; cursor:pointer; } .content .btn:hover{ background:#116d9c; }

Related: See More


Questions / Comments: