JSFiddle - React, Tailwind, and code Playground

by birdie2019

HTML

<div class="container">
  <img id="img" src="" alt="">
  <div class="prev-btn"></div>
  <div class="next-btn"></div>
</div>

SCSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: auto;
    position: relative;
    #img {
        width: 100%;
        object-fit: cover;
        object-position: center center;
        vertical-align: middle;
    }
    .prev-btn {
        width: 50px;
        height: 50px;
        cursor: pointer;
        border-radius: 5px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 30px;
        &:hover {
            background-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }
        &::after {
            content: '';
            width: 15px;
            height: 15px;
            border-top: 3px solid #fff;
            border-left: 3px solid #fff;
            position: absolute;
            top: 32%;
            left: 20px;
            transform: translateY(-50%);
            transform: rotate(-45deg);
        }
    }
    .next-btn {
        width: 50px;
        height: 50px;
        cursor: pointer;
        border-radius: 5px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 30px;
        &:hover {
            background-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }
        &::after {
            content: '';
            width: 15px;
            height: 15px;
            border-top: 3px solid #fff;
            border-left: 3px solid #fff;
            position: absolute;
            top: 32%;
            right: 20px;
            transform: translateY(-50%);
            transform: rotate(135deg);
        }

    }
}

JavaScript

var img = document.querySelector('#img');
var imgArr = [
    'https://picsum.photos/id/215/1200/500',
    'https://picsum.photos/id/327/1200/500',
    'https://picsum.photos/id/353/1200/500',
    'https://picsum.photos/id/362/1200/500',
    'https://picsum.photos/id/420/1200/500'
];
var prevBtn = document.querySelector('.prev-btn');
var nextBtn = document.querySelector('.next-btn');
prevBtn.onclick = prevImg;
nextBtn.onclick = nextImg;
var n = 0;
img.src = imgArr[n];

function nextImg() {
    n++;
    if (n > imgArr.length - 1) {
        n = 0;
    }
    img.src = imgArr[n];
}

function prevImg() {
    n--;
    if (n < 0) {
        n = imgArr.length - 1;
    }
    img.src = imgArr[n];
}