Slide Show with Pure JavaScript

Slide Show JavaScript Follow Instruction: 1- find parent class 'wt-slide-show' then children 'ul' of class. 2- get the first 'li' element of 'ul' from childrens. 3- get the all childrens 'li' of 'ul'. 4- set - how many items will be shown on screen according to width (media-queries). 5- how many items 'li' remaining to move. 6- get the current right position of items 'li'. 7- set the new right position of items 'li' on base of 'next/prev' buttons which is pressed. 8- make a loop function to move all the items 'li' to right position which new set.

HTML

<div class="wt-slide-show">
		<span class="left" onclick="WT_SLIDE_SHOW(this, -1)">&#171;</span>
		<ul>
			<li><img src="http://lorempixel.com/400/200/sports/1/"></li>
			<li><img src="http://lorempixel.com/400/200/sports/2/"></li>
			<li><img src="http://lorempixel.com/400/200/sports/3/"></li>
			<li><img src="http://lorempixel.com/400/200/sports/4/"></li>
			<li><img src="http://lorempixel.com/400/200/sports/5/"></li>
			<li><img src="http://lorempixel.com/400/200/sports/6/"></li>
			<li><img src="http://lorempixel.com/400/200/sports/7/"></li>
		</ul>
		<span class="right" onclick="WT_SLIDE_SHOW(this, +1)">&#187;</span>
	</div>
	<div class="wt-slide-show">
		<span class="left" onclick="WT_SLIDE_SHOW(this, -1)">&#171;</span>
		<ul>
			<li><img src="https://picsum.photos/100/100?image=1"></li>
			<li><img src="https://picsum.photos/100/100?image=2"></li>
			<li><img src="https://picsum.photos/100/100?image=3"></li>
			<li><img src="https://picsum.photos/100/100?image=4"></li>
			<li><img src="https://picsum.photos/100/100?image=5"></li>
			<li><img src="https://picsum.photos/100/100?image=6"></li>
			<li><img src="https://picsum.photos/100/100?image=7"></li>
		</ul>
		<span class="right" onclick="WT_SLIDE_SHOW(this, +1)">&#187;</span>
	</div>

CSS

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/
* {margin: 0;padding: 0;outline: 0;border:0;}
5

JavaScript

/*| WEBICOSOFT.COM Slide Show Function |*/
function WT_SLIDE_SHOW($this,counter) {
	//var ul = document.querySelector('.wt-slide-show > ul');
	//var li = document.querySelector('.wt-slide-show > ul > li');
	//var list = document.querySelectorAll('.wt-slide-show > ul > li');
	var ul, li, list, items, move, right;
	ul = $this.closest('.wt-slide-show').getElementsByTagName('ul')[0]; // find parent class 'wt-slide-show' then children 'ul' of class
	li = ul.getElementsByTagName('li')[0]; // get the first 'li' element of 'ul' from childrens
	list = ul.getElementsByTagName('li'); // get the all childrens 'li' of 'ul'
	items = 5; // how many items will be shown on screen according to width (media-queries)
	move = li.offsetWidth * list.length - li.offsetWidth * items; // how many items 'li' remaining to move
	right = parseInt(li.style.right) || 0; // get the current right position of items 'li'
	// set the new right position of items 'li' on base of 'next/prev' buttons which is pressed
	right = (counter === 1) ? right+li.offsetWidth : right = right-li.offsetWidth;
	//console.log(move +' '+ right);
	if(right > move || right < 0) {/*return false;*/ right = 0;}
	for (var i = 0; i < list.length; i++) {
		list[i].style.right = right+'px';
	}
}