Init project

assets/controllers/render_feature/news_carousel_controller.js

@@ -0,0 +1,36 @@
+// assets/controllers/news_carroussel_controller.js
+import { Controller } from "@hotwired/stimulus";
+import Swiper from "swiper";
+import { Navigation, Pagination } from "swiper/modules";
+
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+
+export default class extends Controller {
+  connect() {
+    this.swiper = new Swiper(this.element, {
+      modules: [Navigation, Pagination],
+      slidesPerView: 1,
+      spaceBetween: 24,
+      loop: true,
+
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+        dynamicBullets: true,
+      },
+
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+    });
+  }
+
+  disconnect() {
+    if (this.swiper) {
+      this.swiper.destroy();
+    }
+  }
+}