JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<div class="wrapper">

		<div class="slideWrapper">
			<ul class="slide">
				<img src="https://placehold.jp/f44242/f44242/150x150.png">
				<img src="https://placehold.jp/f4d041/f4d041/150x150.png">
				<img src="https://placehold.jp/23e05c/23e05c/150x150.png">
				<img src="https://placehold.jp/2fd2ef/2fd2ef/150x150.png">
			</ul>
			<p class="slide__prev">
				戻る
			</p>
			<p class="slide__next">
				進む
			</p>
		</div>

		<div class="slideWrapper">
			<ul class="slide">
				<img src="https://placehold.jp/f44242/f44242/150x150.png">
				<img src="https://placehold.jp/f4d041/f4d041/150x150.png">
				<img src="https://placehold.jp/23e05c/23e05c/150x150.png">
				<img src="https://placehold.jp/2fd2ef/2fd2ef/150x150.png">
			</ul>
			<p class="slide__prev">
				戻る
			</p>
			<p class="slide__next">
				進む
			</p>
		</div>

	</div>

CSS

*{
	margin: 0;
	padding: 0;
}

img{
	vertical-align: bottom;
}

ul{
	list-style: none;
}

.wrapper{
	width: 300px;
}

.slideWrapper{
	width: 150px;
	float: left;
}

.slide{
	min-height: 150px;
	position: relative;
}

.slide img{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 0;
	transition: 0.7s;
}

.slide .show{
	opacity: 1;
	z-index: 1;
}

.slide__prev,
.slide__next{
	cursor: pointer;
	padding: 10px;
	font-size: 12px;
}

.slide__prev{
	float: left;
	margin-left: 5px;
}

.slide__next{
	float: right;
	margin-right: 5px;
}

JavaScript

$(function(){

	var img = $('.slide').children('img');
	var num = img.length;
	var count = 0;
	img.eq(0).addClass('show');

	$('.slide__next').click(function(){
		var slide = $(this).parents('.slideWrapper').find('.slide');
		console.log(slide);
		img.eq(count).removeClass('show');
		if(count>=num-1) {
			count = 0;
		} else {
			count ++;
		}

		img.eq(count).addClass('show');
	});

	$('.slide__prev').click(function(){
		img.eq(count).removeClass('show');

		if(count<=0) {
			count = num-1;
		} else {
			count --;
		}

		img.eq(count).addClass('show');
	});

});