JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<div class="container">
    <h1>By midnight the works were in full operation.</h1>
    <p>"How are we to get to Leatherhead?" she said.</p>

<p>Down the hill I saw a bevy of hussars ride under the railway bridge; three galloped through the open gates of the Oriental College; two others dismounted, and began running from house to house.  The sun, shining through the smoke that drove up from the tops of the trees, seemed blood red, and threw an unfamiliar lurid light upon everything.</p>

<div class="carousel-wrapper">    
<ul class="carousel">
    <li class="item" data-caption="first caption image">
        <img src="http://lorempixel.com/g/800/240/sports" alt=""/>
        <p class="text">
            "But can you sing standing on your head, with a top spinning on your left foot, and a sabre balanced on your right?"
        </p>
    </li>
    <li class="item" data-caption="second  caption image">
        <img src="http://lorempixel.com/g/800/240/food" alt=""/>
        <p class="text">
            'Of course not,' said the Mock Turtle: 'why, if a fish came to ME, and  told me he was going a journey, I should say "With what porpoise?"'
        </p>
    </li>
    <li class="item" data-caption="third caption image">
        <img src="http://lorempixel.com/g/800/240/people" alt=""/>
        <p class="text">
            'I want a clean cup,' interrupted the Hatter: 'let's all move one place  on.'
        </p>
    </li>
    <li class="item" data-caption="fourth caption image">
        <img src="http://lorempixel.com/g/800/240/nature" alt=""/>
        <p class="text">
            With oars apeak, and paddles down, the sheets of their sails adrift, the three boats now stilly floated, awaiting Moby Dick's reappearance.
        </p>
    </li>
</ul>
<div class="carousel-nav">
    <a href="" class="prev">&lt;</a>
    <a href="" class="next">&gt;</a>   
</div>
<div class="buttons"></div>


</div>
<div id="caption"></div>
<p>By midnight the works were in full operation. We were...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400);
*{
	margin: 0px;
	padding: 0px;
}
.container {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    width: 800px;
    margin: 10px auto;
}

.container h1 {
    color: #ccc;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 1px 1px 0 #999;
}

.container p {
    margin: 5px 0;
}

.carousel-wrapper {
    position: relative;
    width: 800px;
    height: 240px;
    overflow: hidden;
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
    margin: 20px 0;
}

.carousel {
    position: absolute;
	left:0px;
}

.carousel li {
    display: block;
    float: left;
    width: 800px;
    height: 240px;
    position: relative;
}

.carousel img {
    position: absolute;
    z-index: 0;
}

.carousel p.text {
    position: absolute;
    z-index: 1;
    font-size: 24px;
    width: 340px;
    right: 80px;
    top: 10px;
    color: #ff6347;
    background-color: #111111;
    background-color: rgba(0,0,0,0.7);
    padding: 5px;
}

.carousel-nav a {
    display: block;
    height: 40px;
    width: 30px;
    font-size: 24px;
    line-height: 1.6;
    font-weight: 800;
    color: #222;
    background-color: rgb(255,99,71);
    background-color: rgba(255,99,71,0.7);
    text-decoration: none;
    padding: 0 4px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    text-align: center;
    z-index: 10;
}

.carousel-nav a.prev {
    left: 0;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.carousel-nav a.next {
    right: 0;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
   ...

JavaScript

var first = $('.item').first(),
        last = $('.item').last(),
        itemWidth = first.width(),
		countx=1,
        carousel = $('.carousel');
		console.log(carousel.position().left)
    carousel.width(itemWidth * $('.item').length);
	
	//auto start
	var giranews = setInterval(function(){move()},5000);
	function move(){
		var left=carousel.position().left
		if(left<(itemWidth*($('li.item').length-2)*-1)){carousel.animate({'left':'0px'},300)}else{ carousel.animate({left: '-=' + itemWidth}, 300);}
		if(countx===4){countx=1}else{countx++}
		showCaption(countx)
		};
		
	function stopx(){
			 clearInterval(giranews);
		};	
		
	function countdown(a) {
		var count = a;
		 timerId = setInterval(function() {
			count--;
			console.log(count);
			if(count == 0) {
				clearInterval(timerId);
				giranews = setInterval(function(){move()},5000);
			};
		}, 1000);
	};
	
	//show captions in caption div
	function showCaption(countx){
		var caption=$('li:eq('+(countx-1)+')').attr('data-caption')
		$('#caption').text(caption)
		}
	showCaption(countx)
	
    $('.prev').on('click', function(e){
        e.preventDefault();
		stopx();
		if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
		if(countx===1){countx=4}else{countx--}
		showCaption(countx)
		var left=carousel.position().left
        if(left===0){carousel.animate({'left':(itemWidth*($('li.item').length-1)*-1)+'px'},300)}else{carousel.animate({left: '+=' + itemWidth}, 300);}
     });
	 
    $('.next').on('click', function(e){
        e.preventDefault();
		stopx();
		if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
		if(countx===4){countx=1}else{countx++}
		showCaption(countx)
		var left=carousel.position().left
		if(left<(itemWidth*($('li.item').length-2)*-1)){carousel.animate({'left':'0px'},300)}else{carousel.animate({left: '-=' + itemWidth}, 300);} 
			
    });
	
	
	//insert buttons links to image
	for(a=0;a<$('li.item').length;a++){
		$('<a...