Bootstrap Snippet Viewport Responsive Bootstrap Carousel TWB: 3.0.1+ 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 ---------->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="images/favicon.ico">
        <title>Carousel Template for Bootstrap</title>
        <!-- Bootstrap core CSS -->
        <link href="//soldierupdesigns.com/carousel/css/bootstrap.min.css" rel="stylesheet">
        <link href="//soldierupdesigns.com/carousel/css/bootstrap-theme.min.css" rel="stylesheet">
        <link href="//soldierupdesigns.com/carousel/css/font-awesome.min.css" rel="stylesheet">
        <link href="//soldierupdesigns.com/carousel/css/jquery-ui.min.css" rel="stylesheet">
        
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <!-- Custom styles for this template -->
        <link href="//soldierupdesigns.com/carousel/css/sticky-footer.css" rel="stylesheet">
        <link href="//soldierupdesigns.com/carousel/css/metro.css" rel="stylesheet">
        <link href="//soldierupdesigns.com/carousel/css/list-group-custom.css" rel="stylesheet">
        <link href="//soldierupdesigns.com/carousel/css/tabs.css" rel="stylesheet">
    </head>
    <body id="page-top" name="page-top" class="active" data-spy="scroll" data-target=".navbar-fixed-top">
        <div class="hidden" id="page-top" name="page-top"></div>
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;
    background:#efefef;
}
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
$('.carousel').carousel();
$(document).ready( function()
{
    var carouselContainer = $('.carousel');
    var slideInterval = 2500;
    
    $('#carousel').carousel({
        interval:   slideInterval
    });
    
    var clickEvent = false;
    $('#carousel').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'));
            if(count == id)
            {
                $('.nav-carousel li').first().addClass('active');   
            }
        }
        clickEvent = false;
    });
    
    function toggleCaption()
    {
        $('.carousel-caption').hide();
        var caption = carouselContainer.find('.active').find('.carousel-caption');
        caption.delay(500).toggle("slide", {direction:"right"}).animate({duration: "fast", easing: "linear"});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Viewport Responsive Bootstrap Carousel TWB: 3.0.1+"
Bootstrap 3.3.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Viewport Responsive Bootstrap Carousel TWB: 3.0.1+" Bootstrap 3.3.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Viewport Responsive Bootstrap Carousel TWB: 3.0.1+"
Bootstrap 3.3.0 Snippet by blayderunner123