<div class="container">
	<div class="slide">
		<div class="slide_arw slide_arw-prev" id="slide_arw-prev"></div>
		<div class="slide_arw slide_arw-next" id="slide_arw-next"></div>
		<ul class="slide_list">
			<li class="slide_list_item"><img src="https://blog.kannart.co.jp/wp-content/uploads/2017/06/slide_01.png" alt="1" width="400" height="200"></li>
			<li class="slide_list_item"><img src="https://blog.kannart.co.jp/wp-content/uploads/2017/06/slide_02.png" alt="2" width="400" height="200"></li>
			<li class="slide_list_item"><img src="https://blog.kannart.co.jp/wp-content/uploads/2017/06/slide_03.png" alt="3" width="400" height="200"></li>
			<li class="slide_list_item"><img src="https://blog.kannart.co.jp/wp-content/uploads/2017/06/slide_04.png" alt="4" width="400" height="200"></li>
		</ul>
	</div>
</div>
body {
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}
a {
	text-decoration: none;
	color: #333;
}
img {
	vertical-align: bottom;
}
.clearfix {
	display: table;
	clear: both;
}
.container {
	width: 500px;
	margin: 0 auto;
	padding: 50px 0;
	background: #fff;
}
.slide {
	position: relative;
	width: 500px;
	margin: 0 auto;

	&_list {
		position: relative;
		width: 400px;
		min-height: 200px;
		overflow: hidden;
		margin: 0 auto;
		&_item {
			position: absolute;
			top: 0;
			left: 0;
			width: 400px;
		}
	}

	&_arw {
		position: absolute;
		top: 50%;
		width: 40px;
		height: 40px;
		margin-top: -20px;
		background: #aaa;
		border-radius: 25px;
		cursor: pointer;

		&:hover {
			background: #000;
		}

		&-prev {
			&:after {
				display: block;
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -10px 0 0 -9px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 10px 12px 10px 0;
				border-color: transparent #ffffff transparent transparent;

			}
		}

		&-next {
			right: 0;
			&:after {
				display: block;
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -10px 0 0 -3px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 10px 0 10px 12px;
				border-color: transparent transparent transparent #ffffff;
			}
		}
	}
}
(function() {
	'use strict';
	
	var slideItems,
			slideItemWidth,
			slidePrev,
			slideNext,
			slideItemNum,
			slideCurrent;
	
	// マッチしたid・class名を持つ要素を取得、変数の定義
	slideItems = document.querySelectorAll('.slide_list_item');
	slideItemWidth = document.querySelectorAll('.slide_list_item')[0].clientWidth;
	slidePrev = document.getElementById('slide_arw-prev');
	slideNext = document.getElementById('slide_arw-next');
	slideItemNum = 0;
	slideCurrent = 0;
	
	for (var i = 0; i < slideItems.length; i++) {
		slideItems[i].style.left = slideItemWidth + 'px';
		if (slideItemNum === slideCurrent) {
			slideItems[i].style.left = 0 + 'px';
		}
		slideItemNum++;
	}

	// PREVボタンクリック時slide関数を実行
	slidePrev.addEventListener('click', function() {
		slide(slideCurrent - 1);
	});
	
	// NEXTボタンクリック時slide関数を実行
	slideNext.addEventListener('click', function() {
		slide(slideCurrent + 1);
	});
	
	// slide
	function slide(next) {
		var pos;
		if (slideCurrent < next) {
			pos = -slideItemWidth;
		} else {
			pos = slideItemWidth;
		}
		// 最初のスライドへ
		if (next === slideItemNum) {
			next = 0;
		// 最後のスライドへ
		} else if (next === -1) {
			next = (slideItemNum - 1);
		}

		for (var i = 0; i < slideItems.length; i++) {
			slideItems[i].style.transition = 'initial';
		}
		
		// 次のスライドを現在のスライドの進行方向後ろに移動させる
		slideItems[next].style.left = -pos + 'px';
		
		setTimeout(function() {
			slideItems[next].style.transition = 'all 0.5s';
			slideItems[next].style.left = 0 + 'px';
		}, 30);
		slideItems[slideCurrent].style.transition = 'all 0.5s';
		slideItems[slideCurrent].style.left = pos + 'px';

		slideCurrent = next;
	}
}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.