JSFiddle - React, Tailwind, and code Playground

by Clement Ng

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <div id="myCarousel" class="carousel fdi-Carousel slide">
                     <!-- Carousel items -->
          <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
            <div class="carousel-inner onebyone-carosel">
                                <div class="item active">
                                    <div class="col-xs-4">
                                       <a href="#"><figure>
										<figcaption class="imageAppear1">1</figcaption>
										<img src="http://www.corincloud.com/skin/1100/img/example-200x200.gif" class="img-responsive center-block">
										</figure></a>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-xs-4">
                                       <a href="#"><figure class="cap-left">
										<figcaption class="imageAppear2">2</figcaption>
										<img src="http://www.corincloud.com/skin/1100/img/example-200x200.gif" class="img-responsive center-block">
										</figure></a>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-xs-4">
                                       <a href="#"><figure class="cap-left">
										<figcaption class="imageAppear3">3</figcaption>
										<img src="http://www.corincloud.com/skin/1100/img/example-200x200.gif" class="img-responsive center-block">
										</figure></a>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-xs-4">
                                       <a...

CSS

.carousel-inner.onebyone-carosel { margin: auto; width: 76%; }
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }

figure { 
	display: block; 
	position: relative; 
	overflow: hidden;
	margin: 0 } 
figcaption { 
	position: absolute; bottom: 0; 
	background: rgba(0,0,0,0.7); 
	color: #f47a20;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	padding: 18px 20px; 
	opacity: 0;
	height: 80px;
	width: 100%;
}
.imageAppear1 {
	-webkit-animation: appearBottom 1s ease-in-out 1s forwards;
    -moz-animation: appearBottom 1s ease-in-out 1s forwards;
    -o-animation: appearBottom 1s ease-in-out 1s forwards;
    animation: appearBottom 1s ease-in-out 1s forwards;
}
.imageAppear2 {
	-webkit-animation: appearBottom 1s ease-in-out 2s forwards;
    -moz-animation: appearBottom 1s ease-in-out 2s forwards;
    -o-animation: appearBottom 1s ease-in-out 2s forwards;
    animation: appearBottom 1s ease-in-out 2s forwards;
}
.imageAppear3 {
	-webkit-animation: appearBottom 1s ease-in-out 3s forwards;
    -moz-animation: appearBottom 1s ease-in-out 3s forwards;
    -o-animation: appearBottom 1s ease-in-out 3s forwards;
    animation: appearBottom 1s ease-in-out 3s forwards;
}

@-webkit-keyframes appearBottom {
    0%   { opacity: 0; margin-bottom: -80px; }
    100% { opacity: 1; margin-bottom:0; }
}
@-moz-keyframes appearBottom {
    0%   { opacity: 0; margin-bottom: -80px; }
    100% { opacity: 1; margin-bottom:0; }
}

JavaScript

$(document).ready(function () {
		$('#myCarousel').carousel({
			interval: 5000
		})
		$('.fdi-Carousel .item').each(function () {
			var next = $(this).next();
			if (!next.length) {
				next = $(this).siblings(':first');
			}
			next.children(':first-child').clone().appendTo($(this));

			if (next.next().length > 0) {
				next.next().children(':first-child').clone().appendTo($(this));
			}
			else {
				$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
			}
		});
	});