Bootstrap Snippet Big Carousel using HTML CSS 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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="carousel">
        <div class="carousel_item item1"><h2><i>Item 1</i></h2></div>
        <div class="carousel_item item2"><h2><i>Item 2</i></h2></div>
        <div class="carousel_item item3"><h2><i>Item 3</i></h2></div>
        <div id="img-container">
            <img class="carousel_img cimg1 img-responsive" src="https://avatars0.githubusercontent.com/u/1748972?v=2&s=96" alt="Responsive Design" />
            <iframe class="carousel_img cimg2" width="500" height="315" src="//www.youtube.com/embed/-UXy5IcJMvY" frameborder="0" allowfullscreen></iframe>
            <img class="carousel_img cimg3 img-responsive" src="https://avatars0.githubusercontent.com/u/1748972?v=2&s=96" alt="Responsive Design" />
        </div>
        <a class="left carousel-control" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
        <ol class="carousel-indicators">
            <li class="ind1 active"></li>
            <li class="ind2"></li>
            <li class="ind3"></li>
        </ol>
    </div><br />
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
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.carousel{
    width: 100%;
    max-width: 2500px;
    height: 400px;
    margin: 50px 0 0 0;
    padding: 0;
    top: 0;
    left: 0;
    background-image: url('http://gbweb.nl/images/huge.jpg');
    position: relative;
    background-position: 1.4s ease-in-out 0.3s;
}
.carousel_item{
    z-index: 10;
    position: absolute;
    width: 50%;
    display: none;
    top: 80px;
}
.carousel_item > h2 > i{
    background-color: rgba(92, 132, 56, 0.8);
    font-size: 36px;
    font-style: normal;
    font-family: 'Open Sans', sans-serif;
    padding: 0 5px;
    text-transform: uppercase;
    color: white;
    font-weight: normal;
}
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
/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*/
(function($) {
// backgroundPosition[X,Y] get hooks
var $div = $('<div style="background-position: 3px 5px">');
$.support.backgroundPosition = $div.css('backgroundPosition') === "3px 5px" ? true : false;
$.support.backgroundPositionXY = $div.css('backgroundPositionX') === "3px" ? true : false;
$div = null;
var xy = ["X","Y"];
// helper function to parse out the X and Y values from backgroundPosition
function parseBgPos(bgPos) {
var parts = bgPos.split(/\s/),
values = {
"X": parts[0],
"Y": parts[1]
};
return values;
}
if (!$.support.backgroundPosition && $.support.backgroundPositionXY) {
$.cssHooks.backgroundPosition = {
get: function( elem, computed, extra ) {
return $.map(xy, function( l, i ) {
return $.css(elem, "backgroundPosition" + l);
}).join(" ");
},
set: function( elem, value ) {
$.each(xy, function( i, l ) {
var values = parseBgPos(value);
elem.style[ "backgroundPosition" + l ] = values[ l ];
});
}
};
}
if ($.support.backgroundPosition && !$.support.backgroundPositionXY) {
$.each(xy, function( i, l ) {
$.cssHooks[ "backgroundPosition" + l ] = {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Big Carousel"
Bootstrap 3.2.0 Snippet by sgoos

Related: See More

Questions / Comments:

"Big Carousel" Bootstrap 3.2.0 Snippet by sgoos

Related: See More

Questions / Comments:

"Big Carousel"
Bootstrap 3.2.0 Snippet by sgoos