JSFiddle - React, Tailwind, and code Playground

by Geo George

HTML

<div class="carousel-main">
      <div class="carousel-main-inner">
    
            <div class="carousel-item carousel-item1 active" c-dir="left" >
                a
            </div>
            <div class="carousel-item carousel-item2" c-dir="left" >
               b
            </div>
            <div class="carousel-item carousel-item3" c-dir="bottom" >
               c
            </div>
            <div class="carousel-item carousel-item4" c-dir="bottom" >
                d
            </div>
      </div>
</div>

CSS

.carousel-main{
  width: 100%;
  height: 300px;
  background: #000;
  overflow: hidden;
}

.carousel-main-inner{
  height: 100%;
  width: 400vw;
  background: #f2f2f2;
  transition: all 0.5s ease 0s;
}
.carousel-item{
  width: 100vw;
  background: green;
  height: 100%;
  float: left;
}
.carousel-item2{
  background: red;
}
.carousel-item3{
  background: orange;
}
.carousel-item4{
  background: violet;
}

JavaScript

var translateAmountX=0;
    var translateAmountY=0;
    var slidecount=$(".carousel-item").length;
    var s=1;
    
function carouselcustom(){
		
    var activeItem=$(".carousel-item.active");
    activeItem.next().addClass("active");
    activeItem.removeClass("active");
    
    var dir=$(".carousel-item.active").attr("c-dir");
    
    if(s<slidecount){
    		if(dir="bottom"){
        	translateAmountY=translateAmountY+25;
        }
        else{
          translateAmountX=translateAmountX+25;
        }
        
    		$(".carousel-main-inner").css("transform","translateX(-"+translateAmountX+"%)");
        s=s+1;
    }
    else{
    	s=1;
      $(".carousel-main-inner").css("transform","translate(0%)");
      translateAmountX=0;
    }


}

setInterval(function(){
	carouselcustom();
},3000)