JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="span12">
            <div class="well">
                <div id="mycarousel" class="carousel fdi-Carousel slide">
                    <!-- Carousel items -->
                    <div class="carousel fdi-Carousel slide" id="carousel" data-interval="0">
                        <div class="carousel-inner onebyone-carosel">
                            <div class="item active">
                                <div class="col-md-4"> <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>

                                    <div class="text-center">1</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4"> <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>

                                    <div class="text-center">2</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4"> <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>

                                    <div class="text-center">3</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4"> <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>

                                    <div class="text-center">4</div>
                                </div>
                            </div>
                            <div class="item">
          ...

CSS

.carousel-inner.onebyone-carosel {
    margin: auto;
    width: 90%;
}
.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%;
}

JavaScript

$(document).ready(function () {

    $('.second-block').find(".carousel").attr("id", "carousel2");
    $('.second-block').find('.carousel-control').attr("href", "#carousel2");
	$('.third-block').find(".carousel").attr("id", "carousel3");
    $('.third-block').find('.carousel-control').attr("href", "#carousel3");

    $('#eventCarousel').carousel({
        interval: 10000
    })
    $('.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));
        }
    });
});