JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
    <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/popper.js@1.16.0/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>
    
    <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>
</head>
<body>
  <div class="wrapper">
  <div class="swiper-container" id="album_images_slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://a.d-cd.net/jKAAAgCYUeA-1920.jpg" alt="">
      </div>
      <div class="swiper-slide">
         <img src="https://a.d-cd.net/jKAAAgCYUeA-1920.jpg" alt="">
      </div>
      <div class="swiper-slide">
         <img src="https://a.d-cd.net/jKAAAgCYUeA-1920.jpg" alt="">
      </div>
      <div class="swiper-slide">
         <img src="https://a.d-cd.net/jKAAAgCYUeA-1920.jpg" alt="">
      </div>
      <div class="swiper-slide">
         <img src="https://a.d-cd.net/jKAAAgCYUeA-1920.jpg" alt="">
      </div>
    </div>
    <div...

CSS

.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);
}
.layer {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    margin: 0 auto;
    height: 100vh;
    background: rgb(36, 36, 36);
    color: #fff;
}
#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;
}
#album_images_slider img {
    width: 100%;
    height: auto;
}
#album_images_slider_scale {
    width: 80%;
    height: 600px;
    margin: 0 auto;
}
#album_images_slider_scale .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-next, .swiper-button-prev {
    outline: none;
    color: #000!important;
}

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"
    }
});

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

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

$("#album_images_slider").click(function(e) {
        if (e.target.nodeName == "IMG") {
            $("body *").hide();
            $("body").prepend(`<div class="layer"></div>`);
            $(".layer").append(`
                <div class="swiper-container" id="album_images_slider_scale">
                        <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 class="swiper-navigation">
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                </div>
            `);
        }
    });
    
    $("body").on("click", ".layer", function(event) {
        let target = event.target;
        if (!($(".swiper-container").has(target).length || $(target).hasClass("swiper-container"))) 				{ 
            $(".layer").remove();
            $("body *").show();
            
        }
        if ($(target).hasClass("swiper-button-next")) {
            console.log("next");
        }
        else if...