Bootstrap 3 Thumbnail Slider

For Example, Thumbnail Slider In Bootstrap 3

Demo



HTML

        <div class="row">
                <div class="col-xs-12">
                        <div class="well">
                                <div id="carousel-slider" class="carousel slide">
                                        <div class="carousel-inner">
                                                <div class="item active">
                                                        <div class="row">
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-1.jpg" alt="Image" class="img-responsive"></a> </div>
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-2.jpg" alt="Image" class="img-responsive"></a> </div>
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-3.jpg" alt="Image" class="img-responsive"></a> </div>
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-4.jpg" alt="Image" class="img-responsive"></a> </div>
                                                        </div>
                                                </div>
                                                <div class="item">
                                                        <div class="row">
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-5.jpg" alt="Image" class="img-responsive"></a> </div>
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-6.jpg" alt="Image" class="img-responsive"></a> </div>
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-7.jpg" alt="Image" class="img-responsive"></a> </div>
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-8.jpg" alt="Image" class="img-responsive"></a> </div>
                                                        </div>
                                                </div>
                                                <div class="item">
                                                        <div class="row">
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-9.jpg" alt="Image" class="img-responsive"></a> </div>
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-10.jpg" alt="Image" class="img-responsive"></a> </div>
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-11.jpg" alt="Image" class="img-responsive"></a> </div>
                                                                <div class="col-xs-3"><a href="#"><img src="img/slide-12.jpg" alt="Image" class="img-responsive"></a> </div>
                                                        </div>
                                                </div>
                                        </div>
                                        <a class="left carousel-control" href="#carousel-slider" data-slide="prev">‹</a> 
                                        <a class="right carousel-control" href="#carousel-slider" data-slide="next">›</a> 
                                </div>
                        </div>
                </div>
        </div>

CSS

<style>
        .carousel-control { 
                font-size: 40px; padding-top: 5%; width: 5%; 
        }
</style>

Jquery

    $(document).ready(function() {
            $('#carousel-slider').carousel({
                    interval: 10000
            })
    
            $('#carousel-slider').on('slid.bs.carousel', function() {
                    //alert("slid");
            });
    });

Copyright 2024 by WebiBeris.com. All Rights Reserved.