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: 400vh;
  width: 400vw;
  background: #f2f2f2;
  transition: all 0.5s ease 0s;
}
.carousel-item{
  width: 100vw;
  background: green;
  height: 200vh;
  float: left;
}
.carousel-item2{
  background: red;
}
.carousel-item3{
  background: orange;
  transform: translate(-100%, -100%);
}
.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(s<slidecount){
        
            if(dir=="bottom"){
              translateAmountY=translateAmountY+25;
            }
            else{
              translateAmountX=translateAmountX+25;
            }
            
            var transforms="translate(-"+translateAmountX+"%,"+translateAmountY+"%)"

        
    				$(".carousel-main-inner").css("transform",transforms);
        	s=s+1;
        }
    /* 
    else{
      s=1;
      $(".carousel-main-inner").css("transform","translate(0%)");
      translateAmountX=0;
    } */


}

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