"use client"; import { useState } from "react"; import { createPortal } from "react-dom"; // 🟢 Import du Portal import { Swiper, SwiperSlide } from "swiper/react"; import { Navigation, Pagination, Autoplay } from "swiper/modules"; import "swiper/css"; import "swiper/css/navigation"; import "swiper/css/pagination"; interface CarouselProps { images: Array<{ url: string; alt: string }>; className?: string; } export default function Carousel({ images, className }: CarouselProps) { const [selectedImage, setSelectedImage] = useState(null); return ( <> {/* Carrousel principal */}

{images.map((img, index) => ( {/* Image cliquable pour affichage en plein écran */} {img.alt}

setSelectedImage(img.url)} // 🟢 Ouvre l’image en plein écran /> ))}

{/* 🟢 Modal plein écran inséré DANS `` grâce à `createPortal` */} {selectedImage && createPortal(

setSelectedImage(null)} // 🔴 Fermer au clic >

{/* Bouton de fermeture */} {/* Image affichée en grand */} Agrandissement

, document.body // 🟢 Place le `modal` en dehors de `

` dans `` )} ); }