JSFiddle - React, Tailwind, and code Playground
HTML
<div id="carousel" class="carousel">
<div class="gallery">
<ul class="images">
<li class="slide">
<img class="img_rylet" src="http://kwicme.com/wp-content/uploads/2015/04/142904067984kng.jpg" />
</li>
<li class="slide">
<img class="img_rylet" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTZPp5hUZ0e5YJ0TQUBh0HceAd1kF8-HVgds4oKPuvSP08JA8fR" />
</li>
<li class="slide">
<img class="img_rylet" src="http://tn.new.fishki.net/26/upload/post/201404/03/1257685/art-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%D0%B0%D1%80%D1%82-%D0%B1%D0%B0%D1%80%D1%8B%D1%88%D0%BD%D1%8F-Elias-Chatzoudis-1153743.jpg" />
</li>
<li class="slide">
<img class="img_rylet" src="http://www.youloveit.ru/uploads/posts/2013-01/1357649951_youloveit_ru_winx_3d_beautiful_pictures.jpg" />
</li>
<li class="slide">
<img class="img_rylet" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQq1-PbpMxZbNwHZaK5bSJqY30cl5Uh7KbuUemohCM5zgBk2Nk2" />
</li>
<li class="slide">
<img class="img_rylet" src="http://cs413823.vk.me/v413823066/2948/grjbOJDuHyM.jpg" />
</li>
</ul>
</div>
</div>
CSS
body {
padding: 10px;
}
.carousel {
position: relative;
}
.carousel img {
width: 400px;
height: 250px;
display: block;
}
.gallery {
width: 400px;
overflow: hidden;
}
.gallery ul {
height: 230px;
width: 9999px;
margin: 0;
padding: 0;
list-style: none;
transition: margin-left 250ms;
font-size: 0;
}
.gallery li.slide {
display: inline-block;
}
JavaScript
$('.images').html($.map($('li', '.images'), function (e) {
return e;
}).reverse());
var count = 1;
var interval = setInterval(function () {
count++;
if (count == $('li', '.images').length) {
clearInterval(interval);
};
$('li', '.images').eq(0).animate({
marginLeft: '-=400'
}, 500)
}, 1500);