JSFiddle - React, Tailwind, and code Playground

by PhilQ

CSS

@keyframes slideshow-fade {
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes slideshow-slide-left {
	0% {left:100%;}
	100% {left:0%;}
}
@keyframes slideshow-slide-right {
	0% {right:100%;}
	100% {right:0%;}
}
@keyframes slideshow-slide-up {
	0% {top:100%;}
	100% {top:0%;}
}
@keyframes slideshow-slide-down {
	0% {bottom:100%;}
	100% {bottom:0%;}
}

.mod_slideshows {
	display: inline-block;
	float: left;
	width: 100%;
	height: 0px;
	overflow: hidden;
	position: relative;
	
	.slide {
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
		background-color: transparent;
		background-image: none;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		opacity: 1;
		
		&.previous {
			z-index: 2;
		}
		&.active {
			z-index: 3;
			animation-name: none;
			animation-duration: 1s;
			animation-delay: 3s;
			animation-iteration-count: infinite;
			// animation-timing-function: linear;
			animation-timing-function: ease;
		}
		&:not(.active) {
			left: 0%;
			top: 0%;
		}
	}

	&.fade:not(.slide-left):not(.slide-right):not(.slide-up):not(.slide-down) .active {
		left: 0%;
		top: 0%;
		animation-name: slideshow-fade;
	}
	
	&.fade.slide-left .active {
		animation-name: slideshow-fade, slideshow-slide-left;
	}
	&.fade.slide-right .active {
		animation-name: slideshow-fade, slideshow-slide-right;
	}
	&.fade.slide-up .active {
		animation-name: slideshow-fade, slideshow-slide-up;
	}
	&.fade.slide-down .active {
		animation-name: slideshow-fade, slideshow-slide-down;
	}
	
	&:not(.fade).slide-left .active {
		animation-name: slideshow-slide-left;
	}
	&:not(.fade).slide-right .active {
		animation-name: slideshow-slide-right;
	}
	&:not(.fade).slide-up .active {
		animation-name: slideshow-slide-up;
	}
	&:not(.fade).slide-down .active {
		animation-name: slideshow-slide-down;
	}
}