Atomcms-edit/resources/themes/dusk/js/app.ts

import "./bootstrap";
import "./external/flowbite";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import Alpine from "alpinejs";
import Focus from "@alpinejs/focus";

import ArticleReactions from "./components/ArticleReactions";

import Swiper from "swiper";
import { Navigation, Pagination } from "swiper/modules";

ArticleReactions.init();
Alpine.plugin(Focus);
Alpine.start();

Swiper.use([Navigation, Pagination]);

document.addEventListener("DOMContentLoaded", function () {
  const swiperEl = document.querySelector(".swiper");

  if (swiperEl) {
    new Swiper(swiperEl as HTMLElement, {
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
      },
    });
  }
});