205 lines
5.1 KiB
HTML
205 lines
5.1 KiB
HTML
Voici un exemple de composant React qui répond à votre demande :
|
||
|
||
**CarrouselReact.js**
|
||
```javascript
|
||
import React, { useState, useEffect } from 'react';
|
||
|
||
const Carrousel = () => {
|
||
const [index, setIndex] = useState(0);
|
||
|
||
useEffect(() => {
|
||
const interval = setInterval(() => {
|
||
setIndex(prevIndex => (prevIndex + 1) % 3);
|
||
}, 3000);
|
||
return () => clearInterval(interval);
|
||
}, [index]);
|
||
|
||
const images = ['https://picsum.photos/200/300', 'https://picsum.photos/200/301', 'https://picsum.photos/200/302'];
|
||
|
||
return (
|
||
<div className="relative overflow-hidden">
|
||
<div
|
||
className="absolute top-0 left-0 h-full w-full flex justify-center items-center"
|
||
style={{
|
||
transform: `translate(-50%, -50%) rotate(${index * 90}deg)`,
|
||
transition: 'transform 3s ease-in-out',
|
||
}}
|
||
>
|
||
<img src={images[index]} alt="Image" className="h-96 w-96 object-cover" />
|
||
</div>
|
||
<div
|
||
className="absolute top-0 left-0 h-full w-full flex justify-center items-center"
|
||
style={{
|
||
transform: `translate(-50%, -50%) rotate(${(index - 1 + 3) % 3 * 90}deg)`,
|
||
transition: 'transform 3s ease-in-out',
|
||
}}
|
||
>
|
||
<img src={images[(index - 1 + 3) % 3]} alt="Image" className="h-96 w-96 object-cover opacity-20" />
|
||
</div>
|
||
<div
|
||
className="absolute top-0 left-0 h-full w-full flex justify-center items-center"
|
||
style={{
|
||
transform: `translate(-50%, -50%) rotate(${(index + 1) % 3 * 90}deg)`,
|
||
transition: 'transform 3s ease-in-out',
|
||
}}
|
||
>
|
||
<img src={images[(index + 1) % 3]} alt="Image" className="h-96 w-96 object-cover opacity-20" />
|
||
</div>
|
||
<div className="flex justify-center items-center absolute bottom-0 left-0 h-10 w-full bg-gradient-to-b from-transparent to-black">
|
||
<span
|
||
className={`cursor-pointer ${index === 0 ? 'text-yellow-500' : 'text-gray-500'}`}
|
||
onClick={() => setIndex(0)}
|
||
style={{
|
||
transform: `translate(-50%, -50%) rotate(${90 * (index === 0 ? 0 : 1)}deg)`,
|
||
}}
|
||
>
|
||
❮
|
||
</span>
|
||
<span
|
||
className={`cursor-pointer ${index === 2 ? 'text-yellow-500' : 'text-gray-500'}`}
|
||
onClick={() => setIndex(2)}
|
||
style={{
|
||
transform: `translate(-50%, -50%) rotate(${90 * (index === 2 ? 0 : 1)}deg)`,
|
||
}}
|
||
>
|
||
❯
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Carrousel;
|
||
```
|
||
Ce composant utilise l'état et les effets pour créer un effet de carrousel auto-annimé. Le style est réalisé avec Tailwind-like utility classes.
|
||
|
||
**index.html**
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Carrousel React</title>
|
||
<link rel="stylesheet" href="tailwind.min.css" />
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');
|
||
|
||
body {
|
||
font-family: 'Open Sans', sans-serif;
|
||
background-color: #f7f7f7;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="max-w-7xl mx-auto p-4">
|
||
<Carrousel />
|
||
</div>
|
||
|
||
<script src="index.js"></script>
|
||
</body>
|
||
</html>
|
||
```
|
||
**tailwind.min.css** (équivaut à écrire un CSS complètement customisé avec les classes de Tailwind)
|
||
```css
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
@layer base {
|
||
.max-w-7xl {
|
||
@apply max-w-7xl;
|
||
}
|
||
.mx-auto {
|
||
@apply mx-auto;
|
||
}
|
||
.p-4 {
|
||
@apply p-4;
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
}
|
||
|
||
@layer utilities {
|
||
.h-full {
|
||
@apply h-full;
|
||
}
|
||
.w-full {
|
||
@apply w-full;
|
||
}
|
||
.h-96 {
|
||
@apply h-96;
|
||
}
|
||
.w-96 {
|
||
@apply w-96;
|
||
}
|
||
.object-cover {
|
||
@apply object-cover;
|
||
}
|
||
.opacity-20 {
|
||
@apply opacity-20;
|
||
}
|
||
.cursor-pointer {
|
||
@apply cursor-pointer;
|
||
}
|
||
.text-yellow-500 {
|
||
@apply text-yellow-500;
|
||
}
|
||
.text-gray-500 {
|
||
@apply text-gray-500;
|
||
}
|
||
.bg-gradient-to-b {
|
||
@apply bg-gradient-to-b;
|
||
}
|
||
.from-transparent {
|
||
@apply from-transparent;
|
||
}
|
||
.to-black {
|
||
@apply to-black;
|
||
}
|
||
}
|
||
```
|
||
Ce fichier CSS est généré avec Tailwind CSS. Il est possible de le remplacer par un CSS personnalisé, mais dans ce cas, il est plus simple d'utiliser une bibliothèque comme Tailwind.
|
||
|
||
**index.js**
|
||
```javascript
|
||
import React from 'react';
|
||
import ReactDOM from 'react-dom';
|
||
import Carrousel from './Carrousel';
|
||
|
||
ReactDOM.render(
|
||
<React.StrictMode>
|
||
<Carrousel />
|
||
</React.StrictMode>,
|
||
document.getElementById('root')
|
||
);
|
||
```
|
||
Ce fichier est utilisé pour rendre le composant Carrousel sur la page web.
|
||
|
||
**package.json**
|
||
```json
|
||
{
|
||
"name": "carrousel-react",
|
||
"version": "1.0.0",
|
||
"description": "",
|
||
"main": "index.js",
|
||
"scripts": {
|
||
"build": "tailwindcss -o tailwind.min.css",
|
||
"dev": "react-scripts start",
|
||
"build:production": "react-scripts build"
|
||
},
|
||
"keywords": [],
|
||
"author": "",
|
||
"license": "ISC",
|
||
"devDependencies": {
|
||
"@types/react": "^18.3.3",
|
||
"react": "^18.3.3",
|
||
"react-dom": "^18.3.3",
|
||
"react-scripts": "^5.0.2",
|
||
"tailwindcss": "^3.2.4"
|
||
},
|
||
"dependencies": {}
|
||
}
|
||
```
|
||
Ce |