JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<ul class="slideshow">
    <li>1. Lorem ipsum dolor sit amet</li>
    <li>2. Consectetur adipiscing elit</li>
    <li>3. Praesent commodo nisi eu sapien</li>
    <li>4. Fusce tempor, sapien vitae tempus dapibus</li>
    <li>5. Aenean pulvinar urna vel tortor</li>
    <li>6. Proin turpis tellus, fringilla eget molestie nec</li>
    <li>7. Etiam sed varius lacus</li>
    <li>8. Aenean facilisis tincidunt massa luctus feugiat</li>
    <li>9. Etiam suscipit vel erat sit amet fringilla</li>
    <li>10. Nulla sit amet eros mauris.</li>
</ul>

CSS

body {
    font: 14px sans-serif;
}
/**** slideshow eyecandy (these styles affect the appearence) ****/
 .slideshow {
    margin: 0;
    border: 10px solid #F0F0F0;
    padding: 0;
}
.slideshow li {
    margin: 0;
    padding: 0;
    background-color: #CCCCCC;
}
/**** slideshow functionality (these styles affect the functionality) ****/
 .slideshow {
    position: relative;
    overflow: hidden;
}
.slideshow li {
    display: none;
    width: 50%;
}
.slideshow li.current {
    display: block;
    float: left;
}
.slideshow li.fadein {
    display: block;
    position: absolute;
    top: 0;
}

JavaScript

$(function() {
	// make the first two slides "current"
	$(".slideshow li:lt(2)").addClass("current");
	setInterval(function() {
		var current = $(".slideshow .current"); // current slides
		var slidein = $(".slideshow .current:last ~ li:lt(2)"); // next slides
		if (slidein.length == 0) {
			slidein = $(".slideshow li:lt(2)");
		}
		slidein.addClass("fadein"); // make visible, absolutely positioned
		slidein.eq(0).css({ left: "100%" }).animate({ left: 0 });
		slidein.eq(1).css({ left: "150%" }).animate({ left: "50%" }, function() {
			// reset and animate the "left" property
			// reset classes when animation is complete
			current.removeClass("current");
			slidein.removeClass("fadein").addClass("current");
		});
	}, 2000);
});