Bootstrap Carousel - Full Width

Full width bootstrap carousel

by kiokotzu

HTML

<link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css">
<section class="block">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="http://lorempixel.com/1024/750" alt="Slide1" class="img-responsive animated pulse" data-animation="pulse" />
                <div class="container">
                    <div class="carousel-caption">
                         <h1 class="animated fadeInLeft" data-animation="fadeInLeft">Another example headline.</h1>

                        <p class="animated fadeInRight" data-animation="fadeInRight">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide2" class="img-responsive animated pulse" data-animation="pulse" />
                <div class="container">
                    <div class="carousel-caption">
                         <h1 class="animated fadeInLeft" data-animation="fadeInLeft">Another example headline.</h1>

                        <p class="animated fadeInRight" data-animation="fadeInRight">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide3" class="img-responsive animated pulse" data-animation="pulse" />
                <div class="container">
                    <div class="carousel-caption">
                         <h1 class="animated fadeInLeft" data-animation="fadeInLeft">Another example headline.</h1>

                        <p...

CSS

.carousel .item {
    width: 100%;
    /*slider width*/
    max-height: 600px;
    /*slider height*/
}
.carousel .item img {
    width: 100%;
    /*img width*/
}
/*add some makeup*/
 .carousel .carousel-control {
    background: none;
    border: none;
    top: 50%;
}
/*full width container*/
 @media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}

JavaScript

function animateElement(obj, anim_) {
    obj.addClass(anim_ + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass();
    });
}

$('#myCarousel').on('slide.bs.carousel', function (e) {

    var current = $('.item').eq(parseInt($(e.relatedTarget).index()));
    $('[data-animation]').removeClass();
    $('[data-animation]', current).each(function () {
        var $this = $(this);
        var anim_ = $this.data('animation');
        animateElement($this, anim_);
    });
});