JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<div id="slider-nav">
		<ul>
			<li><a href="#box1">Item 1</a> </li>
			<li><a href="#box2">Item 2</a> </li>
			<li><a href="#box3">Item 3 </a></li>
			<li><a href="#Item">Item 4 </a> </li>
		</ul>
	</div>
	<div class="slider-body">
		<div class="slider-item active" >Lorem Ipsum</div>
		<div class="slider-item">Ipsum gipsum salt</div>
		<div class="slider-item">Lose my mind</div>
		<div class="slider-item">I will find you</div>
	</div>
	<input type="button" class="slider-prev" value="Prev"/>
	<input type="button" class="slider-next" value="Next"/>

CSS

.slider-body .slider-item{
		position:absolute;
		top:0;
		opacity: 0;
		-webkit-transition: opacity .2s ease-out
	}
	.slider-item.active{
		opacity : 1.0;
		-webkit-transition: opacity 1s ease-in;
		background-color:yellow;
	}
	.slider-body-inactive{
		opacity : 0;		
	}
	.slider-custom-style{
		font-weight:bold;
		border:1px solid red;

JavaScript

(function($){
	var slider = {
		"counter" : 0,
		"size" : (function(){
			return $("#slider-nav ul").children().size();
		})(),
		"position" : 0,
		"switch" : function(index){
			if($("#slider-nav li").eq(slider.position).hasClass("slider-custom-style"))
				$("#slider-nav li").eq(slider.position).removeClass("slider-custom-style");

			this.position = index;

			$(".slider-body .slider-item.active").removeClass("active");
			$(".slider-body .slider-item").eq(this.position).addClass("active");
			
			$("#slider-nav li").eq(this.position).addClass("slider-custom-style");

		}

	};

	$("#slider-nav").on("click", "li", function(){
		slider.switch($(this).index());
	});

	$(".slider-next, .slider-prev").click(function(){
		if($(this).hasClass('slider-next')){
			slider.counter+=1;
		}
		else if( $(this).hasClass('slider-prev')){
			slider.counter-=1;
		}
		slider.switch(slider.counter % slider.size);
		slider.position = slider.counter % slider.size;

	});
})($);