JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="tw-homepage-carousel">
  <svg class="tw-svg-clip">
    <clipPath id="slideMask" clipPathUnits="objectBoundingBox">
      <path d="M0,0 V1 H0.724 a0.03,0.048,0,0,0,0.028,-0.03 L1,0"></path>
    </clipPath>
  </svg>
  <div class="tw-carousel-slider">
    <div class="tw-homepage-carousel-inner">
      <div class="tw-carousel-slide">
        <div class="tw-carousel-slide-content">
          <div class="tw-container">
            <h1>Heading</h1>
          </div>
        </div>
      </div>
      <div class="tw-carousel-slide">
        <div class="tw-carousel-slide-content">
          <div class="tw-container">
            <h1>Heading</h1>
          </div>
        </div>
      </div>
            <div class="tw-carousel-slide">
        <div class="tw-carousel-slide-content">
          <div class="tw-container">
            <h1>Heading</h1>
          </div>
        </div>
      </div>
      <div class="tw-carousel-slide">
        <div class="tw-carousel-slide-content">
          <div class="tw-container">
            <h1>Heading</h1>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="tw-carousel-nav">
    next
  </div>

</div>

CSS

* {
  box-sizing: border-box;
}

body {
  background: #0E0727
}

.tw-svg-clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.tw-homepage-carousel {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
}

.tw-homepage-carousel-inner, 
.tw-carousel-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  transition: all 0.3s ease-in-out;
}

.tw-carousel-slider {
  padding-right: 200px;
}

.tw-carousel-slide,
.tw-carousel-slide-content {
  clip-path: url(#slideMask);
  background: #f00;
  width: 90%;
  position: relative;
  overflow: hidden;
  background: #0E0727;
}

.tw-carousel-slide-content {
  background: #221C3A;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 5px;
  width: calc(100% - 7px);
    display: flex;
  align-items: center;
}


.tw-carousel-slide:not(:first-child) {
  margin-left: -7%;
  z-index: -1;
}

.tw-carousel-nav {
  position: absolute;
  width: 30%;
  height: 100%;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}



.tw-carousel-slide-content .tw-container{
  width: 80%;
  margin: auto;
  display: flex;
  align-items: center;
  font-size: 60px;
  font-family: sans-serif;
  color: #fff;
  
}

JavaScript

let carouselCount = $(".tw-homepage-carousel-inner .tw-carousel-slide").length;

let count = carouselCount;
$('.tw-carousel-slide').each(function(){
		$(this).css("z-index", count);
    count --;
});

$('.tw-carousel-nav').css("z-index", carouselCount + 1);

if (carouselCount <=2) {
	
  $(".tw-carousel-slide:first-child").clone().addClass("tw-slide-clone").appendTo(".tw-homepage-carousel-inner");
	carouselCount = $(".tw-homepage-carousel-inner .tw-carousel-slide").length;
}

let carouselWidth = carouselCount * $(".tw-carousel-slider").width();
let slideWidth = carouselWidth / carouselCount;


$(".tw-homepage-carousel-inner").width(carouselWidth + "px");
$(".tw-homepage-carousel-inner .tw-carousel-slide").width(slideWidth + "px");


let translateX = slideWidth - (0.07 * carouselWidth);


$(".tw-carousel-nav").on("click", function(){

	$(".tw-homepage-carousel-inner").css({
  	transform: "translateX(-" + translateX + "px)"
  });
      translateX += translateX;
});