JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg" id="myslides">
<ul id="mylist">
  <li><button class="btns" id="btn1">Previous</button></li>
  <li><button class="btns" id="btn2">Next</button></li>
</ul>

CSS

#myslides {
  height: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#mylist,
li {
  display: inline-block;
  position: relative;
  top: -5px;
  left: -20px
}

.btns {
  height: 50px;
  width: 200px;
  background: #666666;
  color: white;
  font-size: 20px;
}

JavaScript

$(document).ready(function() {  
  $("#btn2").click(function() {
  	if($('#myslides').attr('src') == 'https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg' )  { 
    	console.log();
      $('#myslides').attr("src", "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg");
    }
  });
});