Bootstrap 3 Carousel Fade Transition

Bootstrap 3 Carousel Fade Transition.markdown

Bootstrap 3 Carousel Fade Transition

Pure CSS extension that adds a fade transition to the Bootstrap Carousel.

Forked from Roland Warmerdam's Pen Bootstrap Carousel Fade Transition.

A Pen by Dave Hunsberger on CodePen.

License.

index.html

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">
                <ol class="carousel-indicators">
                    <li data-target="#carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel" data-slide-to="1"></li>
                    <li data-target="#carousel" data-slide-to="2"></li>
                </ol>
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item">
                        <div class="carousel-caption">
                            <h3>Data Slide 1</h3>
                            <p>Vestibulum vitae dui vel urna dapibus rhoncus ac at lorem. Pellentesque scelerisque pretium molestie.</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-caption">
                            <h3>Data Slide 2</h3>
                            <p>In egestas ligula nec ultrices congue. Suspendisse sit amet eleifend ipsum, non pellentesque sem. Proin suscipit augue lectus, lobortis fringilla mauris iaculis et.</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-caption">
                            <h3>Data Slide 3</h3>
                            <p>Pellentesque sed turpis eleifend, eleifend sem eleifend, mollis nisi. Fusce non mattis arcu. Morbi nec accumsan sem. Sed massa velit, pharetra ut orci a, mollis tincidunt nibh.</p>
                        </div>
                    </div>
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

scripts

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

.carousel-fade {
    .carousel-inner {
        .item {
            transition-property: opacity;
            -webkit-transition-property: opacity;  
            -moz-transition-property:    opacity;
            -ms-transition-property:     opacity; 
            -o-transition-property:      opacity;
        }
        
        .item,
        .active.left,
        .active.right {
            opacity: 0;
        }

        .active,
        .next.left,
        .prev.right {
            opacity: 1;
        }

        .next,
        .prev,
        .active.left,
        .active.right {
            left: 0;
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
        }
    }

    .carousel-control {
        z-index: 2;
    }
}

html, 
body,
.carousel, 
.carousel-inner, 
.carousel-inner .item, 
.carousel-control {
    min-height:300px;
}

.item:nth-child(1) {
    background: #74C390;
}

.item:nth-child(2) {
    background: #51BCE8;
}

.item:nth-child(3) {
    background: #E46653;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />