diff --git a/e2e/carousel.e2e.ts b/e2e/carousel.e2e.ts
index 29a8d4b..c0b0158 100644
--- a/e2e/carousel.e2e.ts
+++ b/e2e/carousel.e2e.ts
@@ -1,7 +1,20 @@
import { test, expect } from '@playwright/test';
-test('carousel container exists on /en/', async ({ page }) => {
+test('carousel initializes on /en/', async ({ page }) => {
await page.goto('/en/');
- await page.waitForSelector('.swiper, .carousel'); // adjust to your actual class
- await expect(page.locator('.swiper, .carousel')).toBeVisible();
-});
+
+ const container = page.locator('swiper-container');
+ await expect(container).toBeVisible();
+
+ await page.waitForFunction(() => {
+ const el = document.querySelector('swiper-container');
+ return el && el.swiper;
+ });
+
+ const hasSwiper = await page.evaluate(() => {
+ const el = document.querySelector('swiper-container');
+ return !!el.swiper;
+ });
+
+ expect(hasSwiper).toBe(true);
+});
\ No newline at end of file
diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro
deleted file mode 100644
index 8b29f36..0000000
--- a/src/components/Carousel.astro
+++ /dev/null
@@ -1,19 +0,0 @@
----
-import { register } from 'swiper/element/bundle';
-import swiperStyles from 'swiper/swiper-bundle.css?inline';
-
-register();
----
-
-
-
- Item 1
- Item 2
- Item 3
-
\ No newline at end of file
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
new file mode 100644
index 0000000..2fdc7e3
--- /dev/null
+++ b/src/components/Carousel.jsx
@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import { register } from "swiper/element/bundle";
+import "swiper/swiper-bundle.css";
+
+export default function Carousel() {
+ useEffect(() => {
+ register();
+ }, []);
+
+ return (
+
+ Item 1
+ Item 2
+ Item 3
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index b51b1b3..5ee76c4 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -1,8 +1,6 @@
---
const { currentOS } = Astro.props;
-import 'swiper/css';
-import 'swiper/element/bundle';
-import Carousel from '../components/Carousel.astro';
+import Carousel from '../components/Carousel.jsx';
---