JSFiddle - React, Tailwind, and code Playground
HTML
<div class="block-11 block-1">
<div class="carousel-wrapper" id="carousel-1">
<ul class="carousel clearfix">
<li>
<img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/YrU0rrW.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/YrU0rrW.jpg" alt="" width="646" height="350">
</li>
</ul>
</div>
</div>
CSS
.block-1 {
position: relative;
width: 100%;
max-width: 1920px;
min-width: 960px;
overflow: hidden;
margin: 0 auto;
background: transparent;
}
ol, ul {
list-style: none;
}
.block-11 {
height: 380px;
}
.carousel-wrapper {
height: 350px;
width: 100%;
max-width: 1920px;
position: absolute;
top: 15px;
}
.carousel {
width: 3000px;
position: relative;
}
li {
float: left;
margin-left: 15px;
position: relative;
}
JavaScript
$(document).ready(function () {
$.fn.carousel = function () {
var carousel = $(this);
var width = carousel.find('li').width();
setInterval(function () {
carousel.delay(1000).animate({
right: '+=' + width
}, 1000, function () {
var first = carousel.find('>:first-child');
first.remove();
$(this).append(first);
$(this).css({
right: '-=' + width
});
});
}, 2000);
return $(this);
};
$('#carousel-1').carousel();
});