JSFiddle - React, Tailwind, and code Playground

HTML

<div class="images">
  <img class="images_first active" src="https://cdn.pixabay.com/photo/2016/07/12/08/19/tree-1511608_960_720.png">
  <img class="images_second" src="http://dreamcasedigital.com/wp-content/uploads/2013/12/Dreamcase-Tree-copy.jpg">
  <img class='images_third' src="http://www.pineswcd.com/vertical/Sites/%7BB4CF315C-B365-47D6-A226-5F80C04C0D48%7D/uploads/tree_clipart.gif">
  
  
  </div>



<button type="submit" class="test-button_backwards">backwards</button>
<button type="submit" class="test-button_forwoard">forwoard</button>
<div class='counter'>
  <div>

CSS

.wrapper
{
    
    display:-webkit-box;
    
    display:-ms-flexbox;
    
    display:flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.images
{
  width:60%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

/*.images::before
{
  content:'<';
  width:90px;
  height:90px;
  color:red;
  font-size:5rem;
}
.images::after
{
  content:'>';
  width:90px;
  height:90px;
  color:red;
  font-size:5rem;
 
}
*/
.images_first,.images_second,.images_third
{
  width:300px;
  height:300px;
  
}



.active
{
  position:absolute;
  z-index:5;
  left:20%;
  width:300px;
  height:300px;
}
.hidden
{
   position:relative;
  opacity:0.2;
  z-index:3;
}
.images_second,.images_third
{
  position:relative;
  opacity:0.2;
}

.counter
{
  width:100vw;
  height:50px;
  background-color:red;
}

JavaScript

const img1 = document.querySelector('.images_first active');
const img2 = document.querySelector(".images_second");
const img3 = document.querySelector(".images_third");

let fw = document.querySelector(".test-button_forwoard");
let back = document.querySelector(".test-button_backwards");

let clicks = 0;
console.log(img1);


fw.addEventListener('click', function()
 {
  img1.classList.remove('active');
  img2.classlist.add("active");
  
  clicks++;
  
});