Prepend and append slides with swiper.js

Question

I'm trying to set up a swiper slider with a collection of images and then I need to prepend and append three videos at the beginning and three at the end.

I've checked my code a few times, rewrote some of it but for some reason when I use both prepend and append it does not work. There aren't any errors showing up in the console so I don't have much to go on with. I've looked around and couldn't find anyone with the same issue I have.

The only way this is working is when all videos are added (I'm removing slides with videos who don't have a src).

Here's the code that doesn't work:

/* Script for swiper carousel of project images */
    const swiper = new Swiper(".swiper", {
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        type: "fraction",
      },
      initialSlide: 0,
      slidesPerView: "auto",
      spaceBetween: 0,
      freeMode: true,
      mousewheel: true,
      loop: false,
      observer: true,
      observeParents: true,
    });

    $(function () {
      swiper.prependSlide([
        '<div class="swiper-slide slide--1">' + "</div>",
        '<div class="swiper-slide slide--2">' + "</div>",
        '<div class="swiper-slide slide--3">' + "</div>",
      ]);
      swiper.appendSlide([
        '<div class="swiper-slide slide--4">' + "</div>",
        '<div class="swiper-slide slide--5">' + "</div>",
        '<div class="swiper-slide slide--6">' + "</div>",
      ]);
    });

    $(function () {
      $(".slide--1").append($(".merge-vid"));
      $(".slide--2").append($(".merge-vid-2"));
      $(".slide--3").append($(".merge-vid-3"));
      $(".slide--4").append($(".merge-vid-4"));
      $(".slide--5").append($(".merge-vid-5"));
      $(".slide--6").append($(".merge-vid-6"));
    });

    // Checks if we are on touch device and set video attribute to controls so that it doesn't autoplay
    if (window.matchMedia("(max-width: 990px)").matches) {
      $(".project-vid").removeAttr("autoplay");
      $(".project-vid").removeAttr("loop");
      $(".project-vid").attr("controls", "controls");

      console.log("mobile video");
    }
    setTimeout(function () {
      $(".swiper-slide").each(function () {
        if ($(".swiper-slide").is(":empty")) {
          $(this).remove();
        }
      });
      $('video source[src=""]').each(function () {
        $(this).parents(".swiper-slide").remove();
      });
    }, 100);

    setTimeout(function () {
      swiper.update();
      swiper.slideTo(0, 0);
      console.log("slided");
    }, 200);

Here's the code I wrote that works :

 /* Script for swiper carousel of project images */
    const swiper = new Swiper(".swiper", {
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        type: "fraction",
      },
      initialSlide: 0,
      slidesPerView: "auto",
      spaceBetween: 0,
      freeMode: true,
      mousewheel: true,
      loop: false,
      observer: true,
      observeParents: true,
    });

    $(function () {
      swiper.prependSlide([
        '<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 class="swiper-slide slide--5">' + "</div>",
        '<div class="swiper-slide slide--6">' + "</div>",
      ]);
    });

    $(function () {
      $(".slide--1").append($(".merge-vid"));
      $(".slide--2").append($(".merge-vid-2"));
      $(".slide--3").append($(".merge-vid-3"));
      $(".slide--4").append($(".merge-vid-4"));
      $(".slide--5").append($(".merge-vid-5"));
      $(".slide--6").append($(".merge-vid-6"));
    });

    // Checks if we are on touch device and set video attribute to controls so that it doesn't autoplay
    if (window.matchMedia("(max-width: 990px)").matches) {
      $(".project-vid").removeAttr("autoplay");
      $(".project-vid").removeAttr("loop");
      $(".project-vid").attr("controls", "controls");

      console.log("mobile video");
    }
    setTimeout(function () {
      $(".swiper-slide").each(function () {
        if ($(".swiper-slide").is(":empty")) {
          $(this).remove();
        }
      });
      $('video source[src=""]').each(function () {
        $(this).parents(".swiper-slide").remove();
      });
    }, 100);

    setTimeout(function () {
      swiper.update();
      swiper.slideTo(0, 0);
      console.log("slided");
    }, 200);