logo DevAnswer - Developers Answer

Slider with Thumbnail Navigation On hover

9th February

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
    .center {
        text-align: center;
    }
    .slider-navigation {
        background: aquamarine;
        padding: 30px 15px;
        text-align: center;
    }

    #slider-thumbs {
        margin-top: -100px;
    }

        #slider-thumbs .list-inline li {
            width: 25%;
            padding: 0px;
            margin-right: -4px;
            cursor: pointer;
        }

            #slider-thumbs .list-inline li:first-child {
                padding-left: 5px;
            }

    .slider-nav-arrow {
        text-align: center;
        margin-bottom: 0px;
        visibility: hidden;
    }

    .selected .slider-nav-arrow {
        visibility: visible;
    }

    .selected .slider-navigation {
        opacity: 0.5;
    }
</style>

</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
<h1 class="center">Slider with Thumbnail Navigation On hover</h1>                          
    <!-- main slider carousel -->
    <div class="row">
        <div class="col-md-12" id="slider">
                
                <div class="col-md-12" id="carousel-bounding-box">
                    <div id="myCarousel" class="carousel slide">
                        <!-- main slider carousel items -->
                        <div class="carousel-inner">
                            <div class="active item" data-slide-number="1">
                                <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="2">
                                <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="3">
                                <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="4">
                                <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive">
                            </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-->
    <!-- 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-1" class="selected">
            <div class="slider-navigation">
                Some text<br>
                Some text here
            </div>
            </a></li>
            <li> <a id="carousel-selector-2">
            <div class="slider-navigation" style="background: darksalmon;">
                Some text<br>
                Some text here
            </div>
            </a></li>
            <li> <a id="carousel-selector-3">
            <div class="slider-navigation" style="background: bisque;">
                Some text<br>
                Some text here
            </div>
            </a></li>
            <li> <a id="carousel-selector-4">
            <div class="slider-navigation" style="background: burlywood;">
                Some text<br>
                Some text here
            </div>
            </a></li>
            </ul>
    </div>               
</div> 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
    $('#myCarousel').carousel({
        interval: 3000
    });

    // handles the carousel thumbnails
    $('[id^=carousel-selector-]').hover(function () {
        var id_selector = $(this).attr("id");
        //console.log(id_selector);
        var id = id_selector.substr(id_selector.length - 1);
        //console.log(id);
        id = parseInt(id);
        $('#myCarousel').carousel(id - 1);
        $('[id^=carousel-selector-]').removeClass('selected');
        $(this).addClass('selected');
        //console.log(this);
    });

    // when the carousel slides, auto update
    $('#myCarousel').on('slid.bs.carousel', function (e) {
        var id = $('.item.active').data('slide-number');
        id = parseInt(id);
        $('[id^=carousel-selector-]').removeClass('selected');
        $('[id=carousel-selector-' + id + ']').addClass('selected');
    });
</script>

</body>
</html>                        



Other Codes