JSFiddle - React, Tailwind, and code Playground

by Mohammad Ali Malekzadeh

HTML

<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Slider</title>
</head>

<body>

    <!-- carousel -->
    <div class="start__carousel">

        <div id="left-arrow" class="arrow"></div>

        <ul id="lightSlider">

            <li>
                <img class="Item-img" src="https://download1347.mediafire.com/zsui4yp9utyg/lvctxrymffwe0o0/small_fast_food.jpg" />
                <div class="carousel__title">Fast Food</div>
            </li>

            <li>
                <img class="Item-img" src="https://download1323.mediafire.com/6jnq379aze2g/dz7xuzir2oan1lx/small_pizza.jpg" />
                <div class="carousel__title">Pizza</div>
            </li>

            <li>
                <img class="Item-img" src="https://download1476.mediafire.com/1h45lc69firg/q53fcbtyj3lrj1a/small_tea.jpg" />
                <div class="carousel__title">Tea</div>
            </li>

        </ul>

        <div id="right-arrow" class="arrow"></div>

    </div>

    <!-- item content -->
    <section class="delicious">

        <div class="container">

            <!-- Fast Food content -->
            <div class="row">
                <div class="col-lg-5 col-md-12 col-sm-12">
                    <div class="left">
                        <div class="title">Fast Food</div>
                        <div>
                            Sometime during the day, you'll probably get hungry and there are several fast food and
                            restaurant options for you including Burger King, Cajun Grill, El Pollo Loco, Panda Express,
                            Sbarro, Subway and more.
                            Finally, if you notice long lines in a fast-food...

CSS

/* Set to default mode */

* {
    margin: 0;
    padding: 0;
    font-family: cursive, sans-serif;
}

/* Basic styles of the upper part */

.start__carousel {
    height: 300px;
    background: #b9d7b1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightSlider {
    height: 260px;
    width: 614px;
    overflow: hidden;
    position: relative;
}

/* Arrow */

.arrow {
    width: 0;
    height: 0;
    cursor: pointer;
    border: solid;
    margin-bottom: 44px;
}

#left-arrow {
    margin-right: 20px;
    border-width: 10px 17px 10px 0;
    border-color: transparent #000000 transparent transparent;
}

#right-arrow {
    margin-left: 20px;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #000000;
}

/* Items */
li {
    display: inline-block;
    text-align: center;
    position: absolute;
}

.Item-img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
}

.carousel__title {
    margin-top: 7px;
    font-family: monospace;
}

.Item-left {
    right: unset;
    left: 0;
    z-index: unset;
    opacity: 0.5;
    transform: unset;
}

.Item-middle {
    right: 50%;
    left: unset;
    z-index: 1;
    opacity: 1;
    transform: translate(50%, 0);
}

.Item-right {
    right: 0;
    left: unset;
    z-index: unset;
    opacity: 0.5;
    transform: unset;
}

/* Main page content */
.delicious {
    margin-top: 10px;
}

.left {
    padding-right: 10px;
    border: solid black;
    border-width: 0 2px 0 0;
}

.title {
    font-family: fantasy;
    font-size: 40px;
}

.left div:nth-child(2) {
    margin-top: 10px;
    text-align: justify;
}

.content-img {
    max-width: 100%;
    margin-right: 5px;
}

JavaScript

// DOM
const items = document.querySelectorAll('li')
const arrowLeft = document.querySelector('#left-arrow')
const arrowRight = document.querySelector('#right-arrow')
const itemsContent = document.querySelectorAll('.row')

// Item number in carousel order
let firstItem = 0
let lastItem = 2
let middleItem = function() {
  let middleVal;
  if (lastItem == 0) {
    middleVal = 2
  } else if (lastItem == -2) {
    middleVal = 0
  } else {
    middleVal = lastItem - 1
  }

  return middleVal
}

// Reset functions
const resetContent = function() {
  for (let i = 0; i < itemsContent.length; i++) {
    itemsContent[i].style.display = 'none'
  }
}

const resetItem = function() {
  for (let i = 0; i < items.length; i++) {
    items[i].removeAttribute("class")
  }
  setDefalte()
}

// Adjust page defaults
const setDefalte = function() {
  resetContent()
  itemsContent[1].style.display = 'block'
  items[0].setAttribute('class', 'Item-left')
  items[1].setAttribute('class', 'Item-middle')
  items[2].setAttribute('class', 'Item-right')
}

// Move to the right
const rightScroll = function() {
  items[lastItem].setAttribute('class', 'Item-left')
  items[middleItem()].setAttribute('class', 'Item-right')
  items[firstItem].setAttribute('class', 'Item-middle')
}

arrowLeft.addEventListener('click', function(e) {
  if (lastItem === -2) {
    lastItem = 1
  }

  if (lastItem === 0) {
    resetItem()
    firstItem = 0
    lastItem = 2
  } else {
    rightScroll()
    firstItem += 2
    lastItem--
  }

  resetContent()
  itemsContent[middleItem()].style.display = 'block'
})

// Move left
const leftScroll = function() {
  items[lastItem].setAttribute('class', 'Item-middle')
  items[middleItem()].setAttribute('class', 'Item-left')
  items[firstItem].setAttribute('class', 'Item-right')
}

arrowRight.addEventListener('click', function(e) {
  if (lastItem === 0) {
    firstItem = 1
  }

  if (firstItem === 2) {
    resetItem()
    firstItem = 0
    lastItem = 2
  } else {
    leftScroll()
 ...