JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="http://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet" type="text/css">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/album.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="js/album.js" defer></script>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
    <div class="contain">
        
        <div class="wrapper">
            
            <div class="swiper-container" id="album_images_slider">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                    <div class="swiper-slide">Slide 4</div>
                </div>
                <div...

CSS

body, html {
    padding: 0;
    margin: 0;
}
.layer {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    width: 100%;
    height: 100vh;
    background: rgb(36, 36, 36);
    color: #fff;
}
.contain {
    margin: 0 auto;
    width: 100%;
    max-width: 1600px;
}
.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: calc(100vh - 150px - 200px);
}
nav {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -webkit-box-orient: vertical!important;
    -webkit-box-direction: normal!important;
        -ms-flex-direction: column!important;
            flex-direction: column!important;
    min-height: 150px;
    background: var(--first-color);
    border-top: 4px solid var(--second-color)!important;
    border-bottom: 2px solid #555;
}

#album_images_slider {
    width: 800px;
    height: 400px;
    margin: 0 auto;
}
#album_images_slider .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: rgb(55, 55, 55);
    color: #fff;
    border: none;
}
.swiper-button-prev, .swiper-button-next {
  color: #000;
}

@media screen and (max-width: 820px) {
    #album_images_slider {
        width: 500px;
    }
}
@media screen and (max-width: 520px) {
    #album_images_slider {
        width: 98%;
    }
}

JavaScript

let album_images_slider = new Swiper("#album_images_slider", {
    direction: "horizontal",
    slidesPerView: 1,
    loop: true,
    allowTouchMove: false,
    speed: 600,
    autoplay: {
        delay: 3000
    },

    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    }
});

$(function() {
    console.log("hello");


    $("#album_images_slider").click(function(e) {
        console.log("hello, mate!");
        console.log(e.target.className);
        if (e.target.classList.contains("swiper-slide")) {
            console.log("hello!");
            $("body *").hide();
            $("body").before(`<div class="layer">Hey!</div>`);
        }
        
    });
    
    $(".layer").on("click", function() {
        console.log("Hi");
        $(".layer").remove();
    });
});