JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="main-slider">
  <div id="buttons">
    <button id="prev-1">prev</button>
    <button id="next-1">next</button>
  </div>
  <div id="dots">
    <div class="dot" data-slide="0">1</div>
    <div class="dot" data-slide="1">2</div>
    <div class="dot" data-slide="2">3</div>
    <div class="dot" data-slide="3">4</div>
  </div>
  <div id="slider">
    <div class="slider-item" style="background: red;">
      <div class="content">
        <img src="" alt="">
        <video mute autoplay loop>
          <source src="" type="video/mp4">
        </video>
      </div>
    </div>
    <div class="slider-item" style="background: green;">
      <div class="content">
        <img src="" alt="">
        <video mute autoplay loop>
          <source src="" type="video/mp4">
        </video>
      </div>
    </div>
    <div class="slider-item" style="background: blue;">
      <div class="content">
        <img src="" alt="">
        <video mute autoplay loop>
          <source src="" type="video/mp4">
        </video>
      </div>
    </div>
    <div class="slider-item" style="background: yellow;">
      <div class="content">
        <img src="" alt="">
        <video mute autoplay loop>
          <source src="" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
  <div id="slider-texts">
    <div class="slider-text-item">
      <h2><span></span></h2>
    </div>
    <div class="slider-text-item">
      <h2><span></span></h2>
    </div>
    <div class="slider-text-item">
      <h2><span></span></h2>
    </div>
    <div class="slider-text-item">
      <h2><span></span></h2>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
}
#slider {
  width: 100%;
  height: 100vh;
  position: relative;
}
.slider-item {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  transform-origin: bottom;
}
.slider-item.active {
  display: flex;
  z-index: 2;
  animation: a 1s both;
}
.slider-item.not-active {
  display: flex;
}
@keyframes a {
  from {
    transform: scaleY(0)
  }
  to {
    transform: scaleY(1)
  }
}

JavaScript

var sliderData = [
                  {
                    "images": {
                      "desktop": "https://player.vimeo.com/external/383996077.hd.mp4?s=9bbb8f42ac7fc5268c063deec4d471c3ce2cac97&amp;profile_id=174",
                      "tablet": "https://picsum.photos/1200/900",
                      "mobile": "http://anagi-development.connect.ge/uploads/slider/"
                    },
                    "watch_video": "",
                    "title": [
                      "პარკ ჰოუმ ვაკე",
                      ""
                    ],
                    "link": [
                      "http://anagi-development.connect.ge/en/project/park-home-vake/22",
                      ""
                    ],
                    "timer": "9000",
                    "ord": "0"
                  },
                  {
                    "images": {
                      "desktop": "https://player.vimeo.com/external/384002188.hd.mp4?s=733dda0ece76d6f49baba83194b8c5fabb5b0ad4&amp;profile_id=174",
                      "tablet": "http://anagi-development.connect.ge/uploads/slider/",
                      "mobile": "http://anagi-development.connect.ge/uploads/slider/"
                    },
                    "watch_video": "",
                    "title": [
                      "ვილა ამბასადორი",
                      "ბინის შერჩევა"
                    ],
                    "link": [
                      "https://www.lipsum.com/",
                      "https://www.lipsum.com/"
                    ],
                    "timer": "9000",
                    "ord": "1"
                  },
                  {
                    "images": {
                      "desktop": "https://player.vimeo.com/external/384002188.hd.mp4?s=733dda0ece76d6f49baba83194b8c5fabb5b0ad4&amp;profile_id=174",
                      "tablet": "http://anagi-development.connect.ge/uploads/slider/",
                      "mobile": "http://anagi-development.connect.ge/uploads/slider/"
     ...