Untitled

<!DOCTYPE html>
<html>
<head>
<style>
#test {
	display: inline-flex;
	flex-wrap: wrap;
}
.t {
	width: 200px;
	height: 200px;
	background-color: #ccc;
	margin: 5px;
}
</style>
</head>
<body>
<span onclick='updatelist(-1)'>Left</span>
<div id='test'>
<div class='t'>1</div>
<div class='t'>2</div>
<div class='t'>3</div>
<div class='t'>4</div>
<div class='t'>5</div>
<div class='t'>6</div>
<div class='t'>7</div>
<div class='t'>8</div>
<div class='t'>9</div>
<div class='t'>10</div>
</div>
<span onclick='updatelist(1)'>Right</span>
<script>
var list = document.getElementById("test");
var currentindex = 0;
var totaldisplay = 4;
var totalimages = list.children.length;
for(var i=0;i<totaldisplay-1;i++){
	list.insertAdjacentHTML('beforeend', list.children[i].outerHTML);
}
for(var i=totaldisplay; i<totalimages+totaldisplay; i++){
	list.children[i].style.display = 'none';
}
function updatelist(val){
	var lastindex = currentindex;
	currentindex += val;
	if(currentindex < 0){
		currentindex = totalimages-1;
		for(var i=0; i<totaldisplay; i++){
			list.children[i].style.display = 'none';
			list.children[totalimages+totaldisplay-2-i].style.display = 'block';
		}
	}else if(currentindex > totalimages-1){
		currentindex = 0;
		for(var i=0; i<totaldisplay; i++){
			list.children[i].style.display = 'block';
			list.children[totalimages+totaldisplay-2-i].style.display = 'none';
		}
	}else{
		if(val == 1){
			list.children[lastindex].style.display = 'none';
			list.children[lastindex+totaldisplay].style.display = 'block';
		}
		if(val == -1){
			list.children[lastindex+totaldisplay-1].style.display = 'none';
			list.children[lastindex-1].style.display = 'block';
		}
	}
}
</script>
</body>
</html>