JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <section class="featured">
        <div class="slider" id="hero-slider" draggable="true">
            <div class="slider__item-list">
                <div class="slider__item">
                    <div class="slider__banner-box">
                        <img src="https://images.pexels.com/photos/10162332/pexels-photo-10162332.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Slider Banner" class="slider__banner-image">
                   </div>
                   <div class="slider__info-box">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 1</p>
                    </div>
                </div>
                <div class="slider__item">
                    <div class="slider__banner-box">
                        <img src="https://images.pexels.com/photos/10822212/pexels-photo-10822212.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Slider Banner" class="slider__banner-image">
                    </div>
                    <div class="slider__info-box">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 2</p>
                    </div>
                </div>
                <div class="slider__item">
                    <div class="slider__banner-box">
                        <img src="https://images.pexels.com/photos/10544670/pexels-photo-10544670.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Slider Banner" class="slider__banner-image">
             ...

CSS

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media only screen and (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}
@media only screen and (min-width: 112.5em) {
  html {
    font-size: 75%;
  }
}

body {
  box-sizing: border-box;
  padding: 4rem;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #222;
}
section.featured {
  width: 100%;
  height: auto;
  margin-bottom: 5rem;
}
section.featured .slider {
  margin: 0 auto;
}
.slider {
  max-width: 114rem;
  height: 50rem;
  position: relative;
  box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.15);
}
.slider__item-list {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.slider__item {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.4s ease-in-out;
}
.slider__item::after {
  content: "";
  display: table;
  clear: both;
}
.slider__banner-box {
  width: 70%;
  float: left;
}
.slider__banner-image {
  width: 100%;
  object-fit: contain;
}
.slider__info-box {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 2.5rem;
  width: 30%;
  height: 100%;
  background-color: #e6e6e6;
}
.slider__indicators {
  position: absolute;
  bottom: 0;
  left: 50%;
  list-style: none;
  transform: translateX(-50%);
}
.slider__indicators-bullet {
  display: inline-block;
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 50%;
  border: 1px solid #fff;
  cursor: pointer;
  transition: all 0.4s ease;
  background-color: lightgray;
}
.slider__indicators-bullet:not(:last-child) {
  margin-right: 0.6rem;
}
.slider__indicators-bullet:hover {
  background-color: #2ccca1;
}
.slider__indicators-bullet--active {
  background-color: #2ccca1;
}
.slider__controls a {
  z-index: 99;
  display: block;
  height: 5rem;
  width: 5rem;
 ...

JavaScript

class Slider {

    constructor(rootId, options) {
        // General initialization
        this.rootId = rootId;

        const root = document.getElementById(rootId);
        if(root === null) {
            throw new Error('Given HTML element id is not valid!');
        }
        this.root = document.getElementById(rootId);

        // Validate options
        if(!options) {
            this.options = {};
        } else {
            this.options = options;
        }

        if(!this.options.delay || isNaN(parseInt(this.options.delay))) {
            this.options.delay = 3000;
        }

        // Set action buttons
        this.controls = {
            right: this.root.querySelector('.slider__controls > .slider__controls--right'),
            left: this.root.querySelector('.slider__controls > .slider__controls--left')
        };

        // Set slider items
        this.items = this.root.querySelectorAll('.slider__item-list .slider__item');
        if(!this.items || !this.items.length) {
            console.warn('Specified slider has no items.');
        }
        this.activeItem = 0;
        this.previousItem = 0;

        // Generate indicator bullets depending on the amount of the items
        this.sliderIndicator = root.querySelector('.slider__indicators');
        this.indicatorItems = new Array();
        this.generateIndicatorItems();

        // Apply calculated left CSS property values to items to order them
        this.applyOrderingWithCSS();

        // Set event listeners on page indicators and action buttons
        this.setEventListeners();
    }

    nextSliderPage() {
        let nextIndex = this.activeItem + 1;
        if(nextIndex > this.items.length - 1) {
            this.activeItem = 0;
        } else {
            this.activeItem = nextIndex;
        }
        this.applyOrderingWithCSS();
        this.previousItem = this.activeItem;
    }

    previousSliderPage() {
        let previousIndex = this.activeItem - 1;
       ...