"Article Thumbnails"
Bootstrap 3.1.0 Snippet by umbrelllla

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 id="myCarousel" class="carousel slide container" data-ride="carousel"><!-- start Carousel --> <div class="row"> <div class="col-md-5 col-lg-5"> <div class="carousel-inner"> <!-- artigo em destaque --> <div class="item active"> <a href="#"> <img src="http://placehold.it/480x360" alt="" class="thumb"> </a> <div class="block-title"> <h2>Lorem ipsum dolor asit amet</h2> <p class="by-author"><small>By Jhon Doe</small></p> </div> </div> <!-- /.featured-article --> <div class="item"> <a href="#"> <img src="http://placehold.it/480x360" alt="" class="thumb"> </a> <div class="block-title"> <h2>Lorem ipsum dolor asit amet</h2> <p class="by-author"><small>By Jhon Doe</small></p> </div> </div> <!-- /.featured-article --> <div class="item"> <a href="#"> <img src="http://placehold.it/480x360" alt="" class="thumb"> </a> <div class="block-title"> <h2>Lorem ipsum dolor asit amet</h2> <p class="by-author"><small>By Jhon Doe</small></p> </div> </div> <!-- /.featured-article --> <div class="item"> <a href="#"> <img src="http://placehold.it/480x360" alt="" class="thumb"> </a> <div class="block-title"> <h2>Lorem ipsum dolor asit amet</h2> <p class="by-author"><small>By Jhon Doe</small></p> </div> </div> <!-- /.featured-article --> <div class="item"> <a href="#"> <img src="http://placehold.it/480x360" alt="" class="thumb"> </a> <div class="block-title"> <h2>Lorem ipsum dolor asit amet</h2> <p class="by-author"><small>By Jhon Doe</small></p> </div> </div> <!-- /.featured-article --> </div></div> <div class="col-md-7 col-lg-7"> <ul class="media-list" id="playlist"> <li class="media active"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/120x90" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor asit amet</h4> <p class="by-author">By Jhon Doe</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/120x90" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor asit amet</h4> <p class="by-author">By Jhon Doe</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/120x90" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor asit amet</h4> <p class="by-author">By Jhon Doe</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/120x90" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor asit amet</h4> <p class="by-author">By Jhon Doe</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/120x90" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor asit amet</h4> <p class="by-author">By Jhon Doe</p> </div> </li> </ul> </div> </div>
/* image thumbnail */ .thumb { display: block; width: 100%; margin: 0; } /* Style to article Author */ .by-author { font-style: italic; line-height: 1.3; color: #aab6aa; } /* Main Article [Module] ------------------------------------- * Featured Article Thumbnail * have a image and a text title. */ .featured-article { width: 482px; height: 350px; position: relative; margin-bottom: 1em; } .featured-article .block-title { /* Position & Box Model */ position: absolute; bottom: 0; left: 0; z-index: 1; /* background */ background: rgba(0,0,0,0.7); /* Width/Height */ padding: .5em; width: 100%; /* Text color */ color: #fff; } .featured-article .block-title h2 { margin: 0; } /* Featured Articles List [BS3] -------------------------------------------- * show the last 3 articles post */ .main-list { padding-left: .5em; } .main-list .media { padding-bottom: 1.1em; border-bottom: 1px solid #e8e8e8; } /*carousel*/ #myCarousel #playlist a small { display: block; } #myCarousel #playlist { /*background: #444;*/ } #playlist > li > a { border-radius: 0px; } #playlist>li.active a { background-color: #000; } .carousel { position: relative; /*background-color: #000;*/ padding: 8px; } #myCarousel #playlist { background: transparent; } #myCarousel #playlist li { list-style-type: none; margin: 0px 0px 5px 0; padding: 3px 3px 3px 5px; } .carousel-caption { position: static; padding-top: 0; padding-bottom: 20px; color: #ffffff; text-align: left; text-shadow: none; } #myCarousel ul#playlist { display: block; list-style-type: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px; } img.media-object.pull-left { margin-right: 10px; max-width:100%; } #myCarousel h3 { margin: 5px 0 0 0; } #myCarousel p { font-size: 13px; line-height: 150%; color: #888; margin: 0; } @media (min-width: 992px){ .treenav { font-size: 90%; } #myCarousel .col-md-7 { padding-right: 0px; }} #myCarousel #playlist li.active { margin-left:3px; background-color:#111; border-left:3px solid #dc143c;; } #myCarousel a:hover { text-decoration: none; } #playlist>li:hover,#myCarousel.item.active:hover { background-color:#222; } .carousel-inner > .active:hover { background-color: #222; } /*end carousel*/
$(document).ready( function() { $('#myCarousel').carousel({ interval: 1000 }); var clickEvent = false; $('#myCarousel').on('click', '#playlist a', function() { clickEvent = true; $('#playlist li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('#playlist').children().length -1; var current = $('#playlist li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('#playlist li').first().addClass('active'); } } clickEvent = false; }); });

Related: See More


Questions / Comments: