JSFiddle - React, Tailwind, and code Playground

by colorkid

HTML

<body>
<div class="slider">
	<div class="slider_image">
		<img src="img/sl1.png">
		<img src="img/sl2.png">
		<img src="img/sl3.png">
		<img src="img/sl4.png">
	</div>
</div>
<ul class="buttons">
	<li class="left">to left</li>
	<li class="right">to right</li>
</ul>
</body>

SCSS

body{
  font-family: sans-serif;
  background:#fff;
}
.slider{
  width: 400px;
  height: 249px;
  border-radius: 3px;
  border:1px solid gray;
  overflow: hidden;
  position: relative;
}
.slider_image{
  display: flex;
  position: absolute;
  
    img{
      width:400px;
      background:gray;
      height: 250px;
    }
}
.buttons{
  display: flex;
  width: 400px;
  justify-content:space-between;
  padding: 0;

    li{
      list-style: none;
      width:75px;
      height: 25px;
      border-radius: 3px;
      border:1px solid gray;
      display: flex;
      justify-content:center;
      align-items:center;
      cursor:pointer;

        &:hover{
          box-shadow:inset 0px 0px 2px 2px gray;
        }
    }
}

JavaScript

var sliderStyle = document.querySelector(".slider_image");
var sliderLength = document.querySelectorAll(".slider_image img");
var leftButton = document.querySelector("li.left");
var rightButton = document.querySelector("li.right");

for(var i = 0; i < sliderLength.length; i++){
	sliderLength[i].setAttribute("alt", [i] + "кухня");
}

sliderStyle.style.left = "0";
sliderStyle.style.transition = "1s";

leftButton.onclick = function() {
	sliderStyle.style.left = parseFloat(sliderStyle.style.left) + 400 + "px";
}

rightButton.onclick = function() {
	sliderStyle.style.left = parseFloat(sliderStyle.style.left) - 400 + "px";
}