# 🎯 Streamlit Image Carousel
Un composant Streamlit moderne et personnalisable pour créer des carrousels d'images interactifs avec navigation fluide et design élégant.
## ✨ Fonctionnalités
- **🎨 Design moderne** : Interface élégante avec animations fluides
- **🔄 Navigation intuitive** : Clic sur les images ou flèches de navigation
- **♾️ Carrousel infini** : Navigation circulaire dans la liste d'images
- **🎛️ Personnalisation complète** : Couleurs, tailles, effets visuels
- **📱 Responsive** : S'adapte à différentes tailles d'écran
- **🛡️ Gestion d'erreurs** : Fallback élégant pour les images manquantes
- **⚡ Performance optimisée** : Chargement intelligent des images
## 🚀 Installation
```bash
pip install streamlit-image-carousel
```
## 📖 Utilisation rapide
```python
import streamlit as st
from streamlit_image_carousel import image_carousel
# Vos images
images = [
{"name": "Image 1", "url": "https://example.com/image1.jpg"},
{"name": "Image 2", "url": "https://example.com/image2.jpg"},
# ... plus d'images
]
# Utilisation basique
result = image_carousel(images=images, key="my_carousel")
# Récupérer la sélection
if result:
selected_image = result["selected_image"]
selected_url = result["selected_url"]
current_index = result["current_index"]
```
## 🎨 Personnalisation
### Paramètres disponibles
```python
result = image_carousel(
# Paramètres obligatoires
images=images, # Liste des images
key="unique_key", # Clé unique Streamlit
# Paramètres optionnels
selected_image=None, # Image présélectionnée
max_visible=5, # Nombre d'images visibles (3-9)
# Personnalisation des couleurs
background_color="#1a1a2e", # Couleur de fond
active_border_color="#ffffff", # Bordure de l'image active
active_glow_color="rgba(255, 255, 255, 0.5)", # Effet de lueur
fallback_background="#2a2a3e", # Fond des fallbacks
fallback_gradient_end="rgb(0, 0, 0)", # Fin du gradient
text_color="#ffffff", # Couleur du texte
arrow_color="#ffffff" # Couleur des flèches
)
```
### Exemples de configurations
#### 🌙 Thème sombre élégant
```python
result = image_carousel(
images=images,
max_visible=7,
background_color="#0f0f23",
active_border_color="#00ff88",
active_glow_color="rgba(0, 255, 136, 0.6)",
fallback_background="#1a1a2e",
fallback_gradient_end="#0a0a1a",
text_color="#ffffff",
arrow_color="#00ff88",
key="dark_theme"
)
```
#### ⚽ Thème sportif
```python
result = image_carousel(
images=images,
max_visible=5,
background_color="#1e3a8a",
active_border_color="#fbbf24",
active_glow_color="rgba(251, 191, 36, 0.7)",
fallback_background="#3b82f6",
fallback_gradient_end="#1e40af",
text_color="#ffffff",
arrow_color="#fbbf24",
key="sport_theme"
)
```
#### ✨ Thème moderne
```python
result = image_carousel(
images=images,
max_visible=9,
background_color="#f8fafc",
active_border_color="#3b82f6",
active_glow_color="rgba(59, 130, 246, 0.5)",
fallback_background="#e2e8f0",
fallback_gradient_end="#cbd5e1",
text_color="#1e293b",
arrow_color="#3b82f6",
key="modern_theme"
)
```
## 📊 Format des données
### Entrée
```python
images = [
{
"name": "Nom de l'image", # Texte affiché si image manquante
"url": "https://..." # URL de l'image
},
# ... plus d'images
]
```
### Sortie
```python
{
"selected_image": "Nom de l'image sélectionnée",
"selected_url": "https://...",
"current_index": 0, # Index de l'image sélectionnée
"timestamp": "2024-01-01T12:00:00.000Z"
}
```
## 🎯 Cas d'usage
### Sélection de joueurs
```python
# Exemple pour une application de football
joueurs = [
{"name": "Lionel Messi", "url": "https://..."},
{"name": "Cristiano Ronaldo", "url": "https://..."},
# ...
]
joueur_selectionne = image_carousel(
images=joueurs,
max_visible=7,
background_color="#1e3a8a",
active_border_color="#fbbf24",
arrow_color="#fbbf24",
key="joueurs"
)
```
### Galerie de produits
```python
# Exemple pour un e-commerce
produits = [
{"name": "Produit A", "url": "https://..."},
{"name": "Produit B", "url": "https://..."},
# ...
]
produit_selectionne = image_carousel(
images=produits,
max_visible=5,
background_color="#f8fafc",
active_border_color="#3b82f6",
text_color="#1e293b",
key="produits"
)
```
## 🔧 Développement
### Installation des dépendances
```bash
# Frontend (React + TypeScript)
cd streamlit_image_carousel/frontend
npm install
# Backend (Python)
pip install -r requirements.txt
```
### Lancement en mode développement
```bash
# Terminal 1: Frontend
cd streamlit_image_carousel/frontend
npm run dev
# Terminal 2: Backend
streamlit run example.py
```
### Build pour production
```bash
cd streamlit_image_carousel/frontend
npm run build
```
## 📝 Exemples
- **`example.py`** : Application complète avec interface de personnalisation
- **`example_image_selector.py`** : Exemples simples de différentes configurations
## 🤝 Contribution
Les contributions sont les bienvenues ! N'hésitez pas à :
1. Fork le projet
2. Créer une branche pour votre fonctionnalité
3. Commiter vos changements
4. Pousser vers la branche
5. Ouvrir une Pull Request
## 📄 Licence
Ce projet est sous licence MIT. Voir le fichier `LICENSE` pour plus de détails.
## 🙏 Remerciements
- [Streamlit](https://streamlit.io/) pour l'écosystème
- [React](https://reactjs.org/) pour le frontend
- [TypeScript](https://www.typescriptlang.org/) pour la sécurité des types
---
**Streamlit Image Carousel** - Créez des carrousels d'images élégants et interactifs pour vos applications Streamlit ! 🎨✨
Raw data
{
"_id": null,
"home_page": null,
"name": "streamlit-image-carousel",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "streamlit, component, carousel, image, interactive, ui",
"author": null,
"author_email": "Antoine <votre-email@example.com>",
"download_url": "https://files.pythonhosted.org/packages/60/57/5912337e7d5fdb4199c9fbc29e33bfccae846a00be8d9ff58d69488d0454/streamlit_image_carousel-1.0.1.tar.gz",
"platform": null,
"description": "# \ud83c\udfaf Streamlit Image Carousel\r\n\r\nUn composant Streamlit moderne et personnalisable pour cr\u00e9er des carrousels d'images interactifs avec navigation fluide et design \u00e9l\u00e9gant.\r\n\r\n## \u2728 Fonctionnalit\u00e9s\r\n\r\n- **\ud83c\udfa8 Design moderne** : Interface \u00e9l\u00e9gante avec animations fluides\r\n- **\ud83d\udd04 Navigation intuitive** : Clic sur les images ou fl\u00e8ches de navigation\r\n- **\u267e\ufe0f Carrousel infini** : Navigation circulaire dans la liste d'images\r\n- **\ud83c\udf9b\ufe0f Personnalisation compl\u00e8te** : Couleurs, tailles, effets visuels\r\n- **\ud83d\udcf1 Responsive** : S'adapte \u00e0 diff\u00e9rentes tailles d'\u00e9cran\r\n- **\ud83d\udee1\ufe0f Gestion d'erreurs** : Fallback \u00e9l\u00e9gant pour les images manquantes\r\n- **\u26a1 Performance optimis\u00e9e** : Chargement intelligent des images\r\n\r\n## \ud83d\ude80 Installation\r\n\r\n```bash\r\npip install streamlit-image-carousel\r\n```\r\n\r\n## \ud83d\udcd6 Utilisation rapide\r\n\r\n```python\r\nimport streamlit as st\r\nfrom streamlit_image_carousel import image_carousel\r\n\r\n# Vos images\r\nimages = [\r\n {\"name\": \"Image 1\", \"url\": \"https://example.com/image1.jpg\"},\r\n {\"name\": \"Image 2\", \"url\": \"https://example.com/image2.jpg\"},\r\n # ... plus d'images\r\n]\r\n\r\n# Utilisation basique\r\nresult = image_carousel(images=images, key=\"my_carousel\")\r\n\r\n# R\u00e9cup\u00e9rer la s\u00e9lection\r\nif result:\r\n selected_image = result[\"selected_image\"]\r\n selected_url = result[\"selected_url\"]\r\n current_index = result[\"current_index\"]\r\n```\r\n\r\n## \ud83c\udfa8 Personnalisation\r\n\r\n### Param\u00e8tres disponibles\r\n\r\n```python\r\nresult = image_carousel(\r\n # Param\u00e8tres obligatoires\r\n images=images, # Liste des images\r\n key=\"unique_key\", # Cl\u00e9 unique Streamlit\r\n \r\n # Param\u00e8tres optionnels\r\n selected_image=None, # Image pr\u00e9s\u00e9lectionn\u00e9e\r\n max_visible=5, # Nombre d'images visibles (3-9)\r\n \r\n # Personnalisation des couleurs\r\n background_color=\"#1a1a2e\", # Couleur de fond\r\n active_border_color=\"#ffffff\", # Bordure de l'image active\r\n active_glow_color=\"rgba(255, 255, 255, 0.5)\", # Effet de lueur\r\n fallback_background=\"#2a2a3e\", # Fond des fallbacks\r\n fallback_gradient_end=\"rgb(0, 0, 0)\", # Fin du gradient\r\n text_color=\"#ffffff\", # Couleur du texte\r\n arrow_color=\"#ffffff\" # Couleur des fl\u00e8ches\r\n)\r\n```\r\n\r\n### Exemples de configurations\r\n\r\n#### \ud83c\udf19 Th\u00e8me sombre \u00e9l\u00e9gant\r\n```python\r\nresult = image_carousel(\r\n images=images,\r\n max_visible=7,\r\n background_color=\"#0f0f23\",\r\n active_border_color=\"#00ff88\",\r\n active_glow_color=\"rgba(0, 255, 136, 0.6)\",\r\n fallback_background=\"#1a1a2e\",\r\n fallback_gradient_end=\"#0a0a1a\",\r\n text_color=\"#ffffff\",\r\n arrow_color=\"#00ff88\",\r\n key=\"dark_theme\"\r\n)\r\n```\r\n\r\n#### \u26bd Th\u00e8me sportif\r\n```python\r\nresult = image_carousel(\r\n images=images,\r\n max_visible=5,\r\n background_color=\"#1e3a8a\",\r\n active_border_color=\"#fbbf24\",\r\n active_glow_color=\"rgba(251, 191, 36, 0.7)\",\r\n fallback_background=\"#3b82f6\",\r\n fallback_gradient_end=\"#1e40af\",\r\n text_color=\"#ffffff\",\r\n arrow_color=\"#fbbf24\",\r\n key=\"sport_theme\"\r\n)\r\n```\r\n\r\n#### \u2728 Th\u00e8me moderne\r\n```python\r\nresult = image_carousel(\r\n images=images,\r\n max_visible=9,\r\n background_color=\"#f8fafc\",\r\n active_border_color=\"#3b82f6\",\r\n active_glow_color=\"rgba(59, 130, 246, 0.5)\",\r\n fallback_background=\"#e2e8f0\",\r\n fallback_gradient_end=\"#cbd5e1\",\r\n text_color=\"#1e293b\",\r\n arrow_color=\"#3b82f6\",\r\n key=\"modern_theme\"\r\n)\r\n```\r\n\r\n## \ud83d\udcca Format des donn\u00e9es\r\n\r\n### Entr\u00e9e\r\n```python\r\nimages = [\r\n {\r\n \"name\": \"Nom de l'image\", # Texte affich\u00e9 si image manquante\r\n \"url\": \"https://...\" # URL de l'image\r\n },\r\n # ... plus d'images\r\n]\r\n```\r\n\r\n### Sortie\r\n```python\r\n{\r\n \"selected_image\": \"Nom de l'image s\u00e9lectionn\u00e9e\",\r\n \"selected_url\": \"https://...\",\r\n \"current_index\": 0, # Index de l'image s\u00e9lectionn\u00e9e\r\n \"timestamp\": \"2024-01-01T12:00:00.000Z\"\r\n}\r\n```\r\n\r\n## \ud83c\udfaf Cas d'usage\r\n\r\n### S\u00e9lection de joueurs\r\n```python\r\n# Exemple pour une application de football\r\njoueurs = [\r\n {\"name\": \"Lionel Messi\", \"url\": \"https://...\"},\r\n {\"name\": \"Cristiano Ronaldo\", \"url\": \"https://...\"},\r\n # ...\r\n]\r\n\r\njoueur_selectionne = image_carousel(\r\n images=joueurs,\r\n max_visible=7,\r\n background_color=\"#1e3a8a\",\r\n active_border_color=\"#fbbf24\",\r\n arrow_color=\"#fbbf24\",\r\n key=\"joueurs\"\r\n)\r\n```\r\n\r\n### Galerie de produits\r\n```python\r\n# Exemple pour un e-commerce\r\nproduits = [\r\n {\"name\": \"Produit A\", \"url\": \"https://...\"},\r\n {\"name\": \"Produit B\", \"url\": \"https://...\"},\r\n # ...\r\n]\r\n\r\nproduit_selectionne = image_carousel(\r\n images=produits,\r\n max_visible=5,\r\n background_color=\"#f8fafc\",\r\n active_border_color=\"#3b82f6\",\r\n text_color=\"#1e293b\",\r\n key=\"produits\"\r\n)\r\n```\r\n\r\n## \ud83d\udd27 D\u00e9veloppement\r\n\r\n### Installation des d\u00e9pendances\r\n```bash\r\n# Frontend (React + TypeScript)\r\ncd streamlit_image_carousel/frontend\r\nnpm install\r\n\r\n# Backend (Python)\r\npip install -r requirements.txt\r\n```\r\n\r\n### Lancement en mode d\u00e9veloppement\r\n```bash\r\n# Terminal 1: Frontend\r\ncd streamlit_image_carousel/frontend\r\nnpm run dev\r\n\r\n# Terminal 2: Backend\r\nstreamlit run example.py\r\n```\r\n\r\n### Build pour production\r\n```bash\r\ncd streamlit_image_carousel/frontend\r\nnpm run build\r\n```\r\n\r\n## \ud83d\udcdd Exemples\r\n\r\n- **`example.py`** : Application compl\u00e8te avec interface de personnalisation\r\n- **`example_image_selector.py`** : Exemples simples de diff\u00e9rentes configurations\r\n\r\n## \ud83e\udd1d Contribution\r\n\r\nLes contributions sont les bienvenues ! N'h\u00e9sitez pas \u00e0 :\r\n\r\n1. Fork le projet\r\n2. Cr\u00e9er une branche pour votre fonctionnalit\u00e9\r\n3. Commiter vos changements\r\n4. Pousser vers la branche\r\n5. Ouvrir une Pull Request\r\n\r\n## \ud83d\udcc4 Licence\r\n\r\nCe projet est sous licence MIT. Voir le fichier `LICENSE` pour plus de d\u00e9tails.\r\n\r\n## \ud83d\ude4f Remerciements\r\n\r\n- [Streamlit](https://streamlit.io/) pour l'\u00e9cosyst\u00e8me\r\n- [React](https://reactjs.org/) pour le frontend\r\n- [TypeScript](https://www.typescriptlang.org/) pour la s\u00e9curit\u00e9 des types\r\n\r\n---\r\n\r\n**Streamlit Image Carousel** - Cr\u00e9ez des carrousels d'images \u00e9l\u00e9gants et interactifs pour vos applications Streamlit ! \ud83c\udfa8\u2728 \r\n",
"bugtrack_url": null,
"license": null,
"summary": "Un composant Streamlit moderne pour cr\u00e9er des carrousels d'images interactifs",
"version": "1.0.1",
"project_urls": {
"Homepage": "https://github.com/2nzi/Streamlit-Composant",
"Issues": "https://github.com/2nzi/Streamlit-Composant/issues",
"Source": "https://github.com/2nzi/Streamlit-Composant"
},
"split_keywords": [
"streamlit",
" component",
" carousel",
" image",
" interactive",
" ui"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "189612daccb8d3527c5ff1120e4904d5cb1fed692b34d2f0e1aae6ed91dd56bd",
"md5": "b41228b84fe2fdc32beb0182fe865739",
"sha256": "5dbbb2c867b2e6aa1b10398d14c1fc0ac9e7cdacffaf5bd19fb5dca8601f2eb7"
},
"downloads": -1,
"filename": "streamlit_image_carousel-1.0.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "b41228b84fe2fdc32beb0182fe865739",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 106093,
"upload_time": "2025-07-30T06:25:41",
"upload_time_iso_8601": "2025-07-30T06:25:41.290945Z",
"url": "https://files.pythonhosted.org/packages/18/96/12daccb8d3527c5ff1120e4904d5cb1fed692b34d2f0e1aae6ed91dd56bd/streamlit_image_carousel-1.0.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "60575912337e7d5fdb4199c9fbc29e33bfccae846a00be8d9ff58d69488d0454",
"md5": "e0b44af353149a8feb53cf6273d018d4",
"sha256": "980c02cde2dd3f4429a1c7203baf8478479e79c22fe905802588fb1015d2a9ec"
},
"downloads": -1,
"filename": "streamlit_image_carousel-1.0.1.tar.gz",
"has_sig": false,
"md5_digest": "e0b44af353149a8feb53cf6273d018d4",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 108979,
"upload_time": "2025-07-30T06:25:43",
"upload_time_iso_8601": "2025-07-30T06:25:43.091523Z",
"url": "https://files.pythonhosted.org/packages/60/57/5912337e7d5fdb4199c9fbc29e33bfccae846a00be8d9ff58d69488d0454/streamlit_image_carousel-1.0.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-07-30 06:25:43",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "2nzi",
"github_project": "Streamlit-Composant",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"requirements": [
{
"name": "streamlit",
"specs": [
[
">=",
"1.28.0"
]
]
}
],
"lcname": "streamlit-image-carousel"
}
JSON
