JSFiddle - React, Tailwind, and code Playground

by turbographics2000

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
		<div class="slideWrapper">
			<div class="slide">
				<ul class="slideInner">
					<li class="slide__item"><img src="https://placehold.jp/cc9999/cc9999/501x400.png"></li>
					<li class="slide__item"><img src="https://placehold.jp/5b27ee/5b27ee/501x400.png"></li>
					<li class="slide__item"><img src="https://placehold.jp/13d745/13d745/501x400.png"></li>
					<li class="slide__item"><img src="https://placehold.jp/de8c21/de8c21/501x400.png"></li>
				</ul>
			</div>
			<p class="slide__prev">
				戻る
			</p>
			<p class="slide__next">
				進む
			</p>
		</div>
    
    
    <div class="slideWrapper" style="margin-top:120px;">
			<div class="slide">
				<ul class="slideInner">
					<li class="slide__item"><img src="https://placehold.jp/cc9999/cc9999/501x400.png"></li>
					<li class="slide__item"><img src="https://placehold.jp/5b27ee/5b27ee/501x400.png"></li>
					<li class="slide__item"><img src="https://placehold.jp/13d745/13d745/501x400.png"></li>
					<li class="slide__item"><img src="https://placehold.jp/de8c21/de8c21/501x400.png"></li>
				</ul>
			</div>
			<p class="slide__prev">
				戻る
			</p>
			<p class="slide__next">
				進む
			</p>
		</div>

CSS

*{
	margin: 0;
	padding: 0;
}

img{
	vertical-align: bottom;
}

ul{
	list-style: none;
}

.wrapper{
	width: 1001px;
	margin: 0 auto;
}

.slideWrapper{
	width: calc(1001px/2);
}

.slide{
	width: 100%;
	height: 100%;
  overflow: hidden;
}

.slide__item{
	width: calc(1001px/2);
	float: left;
}

.slide__prev,
.slide__next{
	cursor: pointer;
	margin-top: 20px;
}

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

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

JavaScript

$(function(){

	$('.slideInner').css('width',(1001/2)*$('.slideInner .slide__item').size()+'px');
	$('.slideInner .slide__item:last').prependTo('.slideInner');
	$('.slideInner').css('margin-left',-1001/2+'px');


	$('.slide__prev').click(function(){
		var $slideInner = $(this).parents('.slideWrapper').find('.slideInner');
		$slideInner.animate({
			marginLeft : parseInt($('.slideInner').css('margin-left'))+1001/2+'px'
		},500,'swing',
		function(){
			$slideInner.css('margin-left',-1001/2+'px');
			$slideInner.find('.slide__item:last').prependTo($slideInner);
		});
	});

	$('.slide__next').click(function(){
		var $slideInner = $(this).parents('.slideWrapper').find('.slideInner');
		$slideInner.animate({
			marginLeft : parseInt($slideInner.css('margin-left'))-1001/2+'px'
		},500,'swing',
		function(){
			$slideInner.css('margin-left',-1001/2+'px');
			$slideInner.find('.slide__item:first').appendTo($slideInner);
		});
	});

});