https://www.drolaszkitti.hu/js/carousel.js

1let counter = 0,
2    slide = document.querySelector('.carousel'),
3    items = slide.querySelectorAll('.carousel-image'),
4    itemsCount = items.length, 
5    prevBtn = document.createElement('div'),
6    nextBtn = document.createElement('div'),
7    timer = 4000,
8    interval = window.setInterval(showNext, timer);
9
10prevBtn.classList.add('prev');
11nextBtn.classList.add('next');
12slide.appendChild(prevBtn);
13slide.appendChild(nextBtn);
14
15//---Change pictures on mobile view---
16function changeCarouselPictures(){
17  let phone = window.innerWidth < 992 ? true : false;
18  if (phone){
19    for (let i = 0; i < itemsCount; ++i){
20      let imgLink = items[i].querySelector('img').getAttribute('src');
21      imgLink = imgLink.slice(0,-5)+"_phone.webp";
22      items[i].querySelector('img').setAttribute('src', imgLink);
23    }
24  }
25}
26changeCarouselPictures();
27
28let showCurrent = function(){
29  	let itemToShow = Math.abs(counter % itemsCount);
30  	[].forEach.call( items, function(el){
31    	el.classList.remove('show');
32  	});
33  	items[itemToShow].classList.add('show');
34};
35function showNext(){
36	counter++; 
37	showCurrent();
38}
39function showPrev(){
40	counter--; 
41	showCurrent();
42}
43
44slide.addEventListener('mouseover', function(){
45	interval = clearInterval(interval);
46});
47
48slide.addEventListener('mouseout', function(){
49	interval = window.setInterval(showNext, timer);
50});
51
52nextBtn.addEventListener('click', showNext, false);
53prevBtn.addEventListener('click', showPrev, false);
54items[0].classList.add('show');