Kenzo/Gallus_Pub
2
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Add ImageCarousel component with responsive design and functionality.

Browse Source 
- Introduced a new `ImageCarousel` component to display image galleries with navigation and indicators.
- Included scoped CSS for custom styles and responsiveness.
- Integrated `ImageCarousel` into the homepage with sample image data.
This commit is contained in:
k
2025-07-20 12:57:40 +02:00
parent 15dedfabcf
commit 00213204c4
3 changed files with 306 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/index.astro
View File

@ -5,6 +5,7 @@ import Hero from "../components/Hero.astro";
import Welcome from "../components/Welcome.astro";
import EventsGrid from '../components/EventsGrid.astro';
import Drinks from "../components/Drinks.astro";
import ImageCarousel from "../components/ImageCarousel.astro";
const events = [
{image: '/images/Logo.png', title: 'Karaoke Night', date: 'Mi, 23. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
@ -12,6 +13,20 @@ const events = [
{image: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
{image: '/images/Logo.png', title: 'Cocktail-Abend', date: 'So, 27. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }
];
const images = [
{ src: '/images/Logo.png', alt: 'Erstes Bild' },
{ src: '/images/Logo.png', alt: 'Zweites Bild' },
{ src: '/images/Logo.png', alt: 'Drittes Bild' },
{ src: '/images/Logo.png', alt: 'Viertes Bild' },
{ src: '/images/Logo.png', alt: 'Fünftes Bild' },
{ src: '/images/Logo.png', alt: 'Sechstes Bild' },
{ src: '/images/Logo.png', alt: 'Siebtes Bild' },
{ src: '/images/Logo.png', alt: 'Achtes Bild' },
{ src: '/images/Logo.png', alt: 'Neuntes Bild' },
{ src: '/images/Logo.png', alt: 'Zehntes Bild' }
];
---
<Layout>
@ -19,5 +34,6 @@ const events = [
<Hero />
<Welcome />
<EventsGrid events={events} />
<ImageCarousel images={images} />
<Drinks />
</Layout>