Bootstrap Snippet Thumbnail Bootstrap Carousel with hover captions using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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-fluid">
    <div class="row-fluid">
        <div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel <br><small>Variant One w/ <b>"hover captions"</b></small></h3></div>
        <div class="col-md-12">
            <div id="thumbCarousel" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner thumb-inner">
                    <div class="active item">
                        <div class="col-xs-3 slide1">
                            <div class="caption">
                                <p>Quisque augue ex, faucibus sit amet porta sit amet, porttitor vel lectus. Sed at sem et nisl varius faucibus. Ut nisl neque, finibus a ultrices laoreet, porttitor a lorem. Aliquam condimentum maximus nulla sit amet egestas.</p>
                                <p><a href="#" type="button" class="btn btn-primary">Learn more</a></p>
                            </div>
                            <a href="#" class="img-responsive">
                                <img src="http://placehold.it/250/f00/fff&text=1" alt="Demo Image">
                            </a>
                        </div>
                    </div><!--/item-->
                    <div class="item">
                        <div class="col-xs-3 fade1">
                            <div class="caption">
                                <p>Cras vulputate lacinia diam in facilisis. Cras consequat massa interdum, euismod magna tincidunt, gravida diam. Vivamus neque lorem, faucibus vitae luctus accumsan, iaculis ac neque. Sed vel tincidunt felis. Donec scelerisque, nibh tincidunt rhoncus efficitur, velit</p>
                                <p><a href="#" type="button" class="btn btn-primary">Learn more</a></p>
                            </div>
                            <a href="#" class="img-responsive">
                                <img src="http://placehold.it/250/f00/fff&text=2" alt="Demo Image">
                            </a>
                        </div>
                    </div><!--/item-->
                    <div class="item">
                        <div class="col-xs-3 slide2">
                            <div class="caption">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(http://fonts.googleapis.com/css?family=Kreon:400,700);
html, body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
    -webkit-font-smoothing: antialiased;
    font: normal 100% arial,sans-serif;
}
html {
    position: relative;
}
body{
    margin:0;
    padding:0;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}
article, aside, div, dt, figcaption, footer, form, header, hgroup, html, main, nav {
    display: block;
}
/*NAVBAR CUSTOM*/
.navbar-brand {
    float: left;
    font-size: 150%;
    width:auto;
}
.social li img{
    width:50%;
    height:50%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function()
{
    $('#thumbCarousel').carousel({
        interval: 3000
    })
});
/* affix the Carousel Buttons to Carousel Item on scroll */
$('.nav-carousel').bind({
    offset:
    {
        top: $('#thumbCarousel').height()-$('.nav-carousel').height()
    }
});
$(document).ready( function()
{
    var carouselContainer = $('.carousel');
    var slideInterval = 2500;
    
    $('#carousel').carousel({
        interval:   slideInterval
    });
    
    var clickEvent = false;
    $('#thumbCarousel').on('click', '.nav-carousel a', function() {
            clickEvent = true;
            $('.nav-carousel li').removeClass('active');
            $(this).parent().addClass('active');    
    }).on('slid.bs.carousel', function(e)
    {
        if(!clickEvent)
        {
            var count = $('.nav-carousel').children().length -1;
            var current = $('.nav-carousel li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to'));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Thumbnail Bootstrap Carousel with hover captions"
Bootstrap 3.3.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Thumbnail Bootstrap Carousel with hover captions" Bootstrap 3.3.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Thumbnail Bootstrap Carousel with hover captions"
Bootstrap 3.3.0 Snippet by blayderunner123