https://github.com/valentinmadiot/img-slider-gallery_js

Slider d’images avec miniatures interactives, design responsive et transitions fluides. Réalisé avec Swiper.js, HTML, CSS et JavaScript. Idéal pour galeries ou portfolios visuels.
https://github.com/valentinmadiot/img-slider-gallery_js

animation carousel creative-ui css frontend gallery hover-effects html image-slider javascript lightbox minimalist modern-ui no-framework responsive responsive-design swiperjs ui-components vanilla-js webdesign

Last synced: about 2 months ago
JSON representation

Slider d’images avec miniatures interactives, design responsive et transitions fluides. Réalisé avec Swiper.js, HTML, CSS et JavaScript. Idéal pour galeries ou portfolios visuels.

• Host: GitHub
• URL: https://github.com/valentinmadiot/img-slider-gallery_js
• Owner: ValentinMadiot
• Created: 2025-02-18T15:39:30.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-26T13:37:57.000Z (12 months ago)
• Last Synced: 2025-07-02T22:06:08.952Z (12 months ago)
• Topics: animation, carousel, creative-ui, css, frontend, gallery, hover-effects, html, image-slider, javascript, lightbox, minimalist, modern-ui, no-framework, responsive, responsive-design, swiperjs, ui-components, vanilla-js, webdesign
• Language: HTML
• Homepage: https://image-slider-gallery-1.netlify.app/
• Size: 1.08 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
  

    

      

    

    

  
⚱️ Carrousel d’images de Vases
  



## 
 📌 Sommaire

    🎨   [**Introduction**](#introduction)


    🛠️   [**Technologies**](#technologies)


    🎯   [**Fonctionnalités**](#fonctionnalités)


    🚀   [**Installation**](#installation)


## 
 🎨 Introduction

Ce projet présente un carrousel d’images interactif avec miniatures synchronisées, développé en HTML, CSS et JavaScript à l’aide de Swiper.js.

Chaque diapositive affiche une image principale accompagnée d’un titre et sous-titre, tandis que la navigation s’effectue de manière fluide via des flèches, une pagination fractionnée, ou des miniatures synchronisées.

Parfait pour des galeries de produits, portfolios créatifs, ou présentations interactives.

## 
 🛠️ Technologies

- HTML5 sémantique et accessible

- CSS3 moderne avec variables, media queries et animations

- JavaScript ES6 clair et modulaire

- [Swiper.js](https://swiperjs.com/) pour un carrousel fluide avec miniatures

- Remix Icons pour les flèches et éléments visuels

- Design 100% responsive sans framework externe

## 
 🎯 Fonctionnalités

- Carrousel principal avec miniatures synchronisées

- Navigation via flèches, miniatures ou pagination

- Animation au survol des images

- Transition fluide entre les slides

- Design responsive adapté à tous les écrans

- Aucun framework requis

## 
 🚀 Installation

### ✅ Prérequis

- [Google Chrome](https://www.google.com/)  —  Navigateur moderne

- [Visual Studio Code](https://code.visualstudio.com/)  —  Éditeur de code

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)  —  Extension VS Code

### 📥 Cloner le projet

```bash

git clone https://github.com/ValentinMadiot/img-slider-gallery_js

cd img-slider-gallery_js

```

### ▶️ Lancer le projet

Il suffit d’ouvrir le fichier `index.html` dans un navigateur, ou d’utiliser l’extension **Live Server** sur VS Code pour un aperçu dynamique.