Why don't .swiper-button-prev and .swiper-button-next work?

Question

js Fiddle: https://jsfiddle.net/rfbvL4gj/7/

I have slider with images inside it. And when I click on the one of the images, all content is hidden, and it's shown .layer element with second big-scaled slider with the same images.

But there's one problem: when I click on .swiper-button-next and .swiper-button-prev of the big-scaled slider nothing happens. I've no idea what's wrong.

JS:

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 ($(target).hasClass("swiper-button-prev")) {
            console.log("prev");
        }
    });

Answer 1

JavaScript is Synchronous

If you want to insert specified content (Swiper HTML in your case) and than "do somehing" related to this content the order should be:

1. Jquery append()
2. "do something" on the append DOM node ("swiper slider" in your case).

Not working:

$("b").css("background-color", "yellow"); 
$("p").append(" <b>Appended text</b>.");

Working:

$("p").append(" <b>Appended text</b>.");
$("b").css("background-color", "yellow");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<p>Broken code example.</p>

<script>
    $("p").append(" <b>Appended text</b>.");
    $("b").css("background-color", "yellow");
</script>

In your case, the order is 2 then 1.

Related: jQuery function after .append

Hello world example

$(".layer").append(`
                <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">Slide 1</div>
                            <div class="swiper-slide">Slide 2</div>
                        </div>
                        <div class="swiper-navigation">
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                </div>
`);

var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<div class="layer"></div>

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