Carasousel with transform

by kpulkit29

HTML

<div class="image-container">
    <button class='prev'>
        Prev
    </button>
    <div class="images">
       
    </div>
    <button class='prev'>
        Next
    </button>
</div>

CSS

.image-container {
   display: flex;
   grid-gap: 20px;
   align-items: center;
}

.images {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

JavaScript

let images = [ 'https://rukminim1.flixcart.com/fk-p-flap/200/200/image/Mask%20Group-2.png','https://rukminim1.flixcart.com/fk-p-flap/200/200/image/Mask%20Group.png', 'https://rukminim1.flixcart.com/fk-p-flap/200/200/image/Mask%20Group-4.png', 'https://rukminim1.flixcart.com/fk-p-flap/200/200/image/Mask%20Group-3.png'];

function Carousel(images) {
	this.index = 0;
  this.images = images;
  this.imgRef = []
  let count = 0;
  for(let image of this.images) {
  	let img = document.createElement("img");
    img.src = image
    img.style.position = `absolute`;
    img.style.left = `${count*200}px`;
    img.width = '200';
    img.height = '200';
    img.style.transition = '0.5s ease-out'
    this.imgRef.push({img, y: count*200});
    document.getElementsByClassName('images')[0].appendChild(img);
    count++;
  }
  
}

Carousel.prototype.next = function() {
  if(this.index < this.images.length - 1) {
    this.index++;
    for(let item of this.imgRef) {
      item.img.style.transform = `translateX(${item.y-400}px)`;
      item.y = item.y-400;
    }
  }
}

Carousel.prototype.prev = function() {
  if(this.index > 0) {
    this.index--;
    for(let item of this.imgRef) {
      item.img.style.transform = `translateX(${item.y+400}px)`;
      item.y = item.y+400;
    }
  }
}

let carousel = new Carousel(images);
let buttons = document.getElementsByTagName("button")
buttons[0].onclick = carousel.prev.bind(carousel);
buttons[1].onclick = carousel.next.bind(carousel);