JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<img src="" alt="" id="first">
<img src="" alt="" id="second">
<button data-direction="prev" class="button">prev</button>
<button data-direction="next" class="button">next</button>

JavaScript

var slider = {
	init : function(){
  	this.setImgs();
    this.main();
  },
  count : 0,
  setImgs : function(){
  	var firstImg = document.querySelector('#first').src = this.imgs[0];
    var secondImg = document.querySelector('#second').src = this.imgs[1];
  },
  imgs : [
    'https://picsum.photos/id/1/300/300',
    'https://picsum.photos/id/2/310/310',
    'https://picsum.photos/id/3/320/320',
    'https://picsum.photos/id/4/330/330',
    'https://picsum.photos/id/5/340/340'
  ],
  main : function(){
  	var buttons = document.querySelectorAll('.button');
    var length = buttons.length
    var imgs = this.imgs;
    var count = this.count;
    for(var i = 0; i < length; i++ ){
    	buttons[i].addEventListener('click',function(e){
      	if(this.dataset.direction == 'next'){
        	var firstImg = document.querySelector('#first').src = imgs[count + 1];
          var secondImg = document.querySelector('#second').src = imgs[count];
          count++;
        }else {
        	var firstImg = document.querySelector('#first').src = imgs[count];
          var secondImg = document.querySelector('#second').src = imgs[count - 1];
          count--;
        }
      })
    }
  }
}
slider.init();