Merge pull request #19 from amakarudze/master

amakarudze · web-flow · commit f6f07b221b9b · 2025-12-21T20:18:02.000+01:00
Try to fix carousel issues
diff --git 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);
+});
diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro
diff --git a/src/components/Carousel.jsx 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 (
+    <swiper-container slides-per-view="1" autoplay="true" loop="true">
+      <swiper-slide>Item 1</swiper-slide>
+      <swiper-slide>Item 2</swiper-slide>
+      <swiper-slide>Item 3</swiper-slide>
+    </swiper-container>
+  );
+}
diff --git 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';
 ---
 
 <nav>
diff --git a/src/layouts/TutorialLayout.astro b/src/layouts/TutorialLayout.astro
@@ -9,15 +9,10 @@ const { title, currentOS } = Astro.props;
     <meta charset="utf-8" />
     <title>{title} | Django Girls Tutorial</title>
     <link rel="stylesheet" href="/styles.css" />
-    <script type="module" src="/src/scripts/swiper.js"></script>
-    <script type="module" src="/src/scripts/sidebar-toggle.js"></script>
   </head>
   <body>
     <header>
       <h1>Django Girls Tutorial</h1>
-      <button class="menu-toggle" aria-controls="sidebar" aria-expanded="false">
-        ☰ Menu
-      </button>
     </header>
 
     <div class="overlay"></div>
diff --git a/src/scripts/swiper.js b/src/scripts/swiper.js
@@ -1,3 +1,4 @@
 import { register } from 'swiper/element/bundle';
+import 'swiper/swiper-bundle.css';
 
 register();

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`import { register } from 'swiper/element/bundle';`
	`2`	`+import 'swiper/swiper-bundle.css';`
`2`	`3`
`3`	`4`	`register();`