js-event-listener-click-call-function.txt

//HTML part
<div class="slider-wrapper">
	<button id="right-btn"></button>
	<button id="left-btn"></button>
	<div class="slider-images">
		<img src="img-name.jpg" />
		<img src="img-name2.jpg" />		
		<img src="img-name3.jpg" />		
		<img src="img-name4.jpg" />		
	</div>
</div>


//js part
/*img gallery*/

let rightButton = document.querySelector('#right-btn');
let leftButton = document.querySelector('#left-btn');
let pictures = document.querySelectorAll('.slider-images img');

let imgNum = 0;

//function move right, arrow function 
const moveRight = () => {
	//function body, this one particulary styles img as display block on every button click 
	displayNone();
	imgNum++;
	if(imgNum === pictures.lenght) {
		imgNum = 0;
	}
	pictures[imgNum].style.display = 'block';
}

//function move left, arrow function 
const moveLeft = () => {
	//function body, this one particulary styles img as display block on every left button click 
	displayNone();
	imgNum--;
	if(imgNum === -1) {
		imgNum = pictures.lenght - 1;
	}
	pictures[imgNum].style.display = 'block';
}

//this function changes all imgs style to display none
const displayNone = () => {
	pictures.forEach((img) => {
		img.style.display = 'none';
	})
}

//by clicking HTML DOM element, we have event listener which waits for click and executes function
rightButton.addEventListener('click', moveRight);
leftButton.addEventListener('click', moveLeft);

//source: https://youtu.be/tlfJLgRHtXg?t=960