"Thumbnail pagination"
Bootstrap 3.3.0 Snippet by sajawal

<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 class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3"> <div class="row"> <nav aria-label="..."> <ul class="pager" role="tablist"> <li class="previous" onclick="goTo(1);"><a href="#"><span aria-hidden="true">←</span> Previous</a></li> <li class="active" id="first"> <a aria-controls="tab1" data-toggle="tab" href="#tab1" role="tab">1</a> </li> <li> <a aria-controls="tab2" data-toggle="tab" href="#tab2" role="tab">2</a> </li> <li> <a aria-controls="tab3" data-toggle="tab" href="#tab3" role="tab">3</a> </li> <li> <a aria-controls="tab4" data-toggle="tab" href="#tab4" role="tab">4</a> </li> <li id="last"> <a aria-controls="tab5" data-toggle="tab" href="#tab5" role="tab">5</a> </li> <li class="next" onclick="goTo(2);"><a href="#">Next <span aria-hidden="true">→</span></a></li> </ul> </nav> </div> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="tab1" role="tabpanel"> <div class="col-sm-6"> <div class="thumbnail"> <img alt="..." src="http://placehold.it/240x150"> <div class="caption"> <h3>Thumbnail label 1</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#" role="button">Read more ...</a></p> </div> </div> </div> <div class="col-sm-6"> <div class="thumbnail"> <img alt="..." src="http://placehold.it/240x150"> <div class="caption"> <h3>Thumbnail label 2</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#" role="button">Read more ...</a></p> </div> </div> </div> </div> <div class="tab-pane" id="tab2" role="tabpanel"> <div class="col-sm-6"> <div class="thumbnail"> <img alt="..." src="http://placehold.it/240x150"> <div class="caption"> <h3>Thumbnail label 3</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#" role="button">Read more ...</a></p> </div> </div> </div> <div class="col-sm-6"> <div class="thumbnail"> <img alt="..." src="http://placehold.it/240x150"> <div class="caption"> <h3>Thumbnail label 4</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#" role="button">Read more ...</a></p> </div> </div> </div> </div> <div class="tab-pane" id="tab3" role="tabpanel"> <div class="col-sm-6"> <div class="thumbnail"> <img alt="..." src="http://placehold.it/240x150"> <div class="caption"> <h3>Thumbnail label 5</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#" role="button">Read more ...</a></p> </div> </div> </div> <div class="col-sm-6"> <div class="thumbnail"> <img alt="..." src="http://placehold.it/240x150"> <div class="caption"> <h3>Thumbnail label 6</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#" role="button">Read more ...</a></p> </div> </div> </div> </div> <div class="tab-pane" id="tab4" role="tabpanel"> <div class="col-sm-6"> <div class="thumbnail"> <img alt="..." src="http://placehold.it/240x150"> <div class="caption"> <h3>Thumbnail label 7</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#" role="button">Read more ...</a></p> </div> </div> </div> <div class="col-sm-6"> <div class="thumbnail"> <img alt="..." src="http://placehold.it/240x150"> <div class="caption"> <h3>Thumbnail label 8</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#" role="button">Read more ...</a></p> </div> </div> </div> </div> <div class="tab-pane" id="tab5" role="tabpanel"> <div class="col-sm-6"> <div class="thumbnail"> <img alt="..." src="http://placehold.it/240x150"> <div class="caption"> <h3>Thumbnail label 9</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#" role="button">Read more ...</a></p> </div> </div> </div> <div class="col-sm-6"> <div class="thumbnail"> <img alt="..." src="http://placehold.it/240x150"> <div class="caption"> <h3>Thumbnail label 10</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#" role="button">Read more ...</a></p> </div> </div> </div> </div> </div> </div> </div>
.pager .active a{ background-color : #337AB7; color: #FFF; border: 0px; }
function goTo(number){ $('ul.pager li:eq('+number+') a').tab('show'); upgradePreNext(number); } function upgradePreNext(number){ if (number>1){ $('ul.pager li:eq(0)').attr("onclick","goTo("+(number-1)+")"); $('ul.pager li:eq(0)').attr("class", "previous"); } else { $('ul.pager li:eq(0)').attr("class", "disabled"); } if (number<5){ $('ul.pager li:eq(6)').attr("onclick","goTo("+(number+1)+")"); $('ul.pager li:eq(6)').attr("class", "next"); } else { $('ul.pager li:eq(6)').attr("class", "disabled"); } } $(document).ready(function(){ $('li a').on('click',function(e){ goTo((e.target.innerHTML)-0); }); });

Related: See More


Questions / Comments: