JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<ul class="slideshow">
		<li class="first">
		<h4>عنوان اسلاید اول</h4>
		<p>متن اسلاید اول متن اسلاید اول متن اسلاید اول متن اسلاید اول متن اسلاید اول متن اسلاید اول متن اسلاید اول متن اسلاید اول متن اسلاید اول متن اسلاید اول متن اسلاید اول متن اسلاید اول متن اسلاید اول متن اسلاید اول </p>
		</li>
		<li><h4>عنوان اسلاید دوم </h4>
		<p>متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  متن اسلاید دوم  </p>
		</li>
		<li>
		<h4>عنوان اسلاید سوم </h4>
		<p>متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  متن اسلاید سوم  </p>
		</li>
		<li>
		<h4>عنوان اسلاید چهارم  </h4>
		<p>متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   متن اسلاید چهارم   </p>
		</li>
		<li class="last">
		<h4>عنوان اسلاید آخر   </h4>
		<p>متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    متن اسلاید آخر    </p>
		</li>
	
	</ul>

CSS

html {
	direction:rtl
}
.slideshow {
	display:block;
	list-style:none;
	width:70%;
	margin-left:auto;
	margin-right:auto;
	height:250px;
}

JavaScript

$(".slideshow li").hide();
$(".slideshow li.first").show().addClass("active");
function myslideshow() {
	setTimeout(function() {
	$(".slideshow li.active").each(function() {
		if($(this).hasClass("last")) {
		$(this).slideUp("slow").removeClass("active");
		$(".first").slideDown("slow").addClass("active");
		}
		else {
		$(this).slideUp("slow").removeClass("active").next("li").slideDown("slow").addClass("active");
		}
	});
	$(".slideshow li").promise().done(function() {
	myslideshow();
	});
	},2500);
}
myslideshow();