https://github.com/valentinmadiot/background-slider-travel_js

Slider immersif pour destinations exotiques avec Swiper.js, GSAP et popup vidéo intégrée. Design responsive idéal pour sites touristiques, agences de voyage ou projets créatifs modernes.
https://github.com/valentinmadiot/background-slider-travel_js

background-slider css-transitions gallery-images gsap-animation html-css-js image-slider interactive-gallery javascript-ui js-carousel landing-pages lightweight-slider popup-video responsive-designs swiperjs travel-ui travel-website-frontend tropical-theme ui-design web-animations webdesign

Last synced: 4 months ago
JSON representation

Slider immersif pour destinations exotiques avec Swiper.js, GSAP et popup vidéo intégrée. Design responsive idéal pour sites touristiques, agences de voyage ou projets créatifs modernes.

• Host: GitHub
• URL: https://github.com/valentinmadiot/background-slider-travel_js
• Owner: ValentinMadiot
• Created: 2025-02-18T15:46:24.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-29T17:06:01.000Z (12 months ago)
• Last Synced: 2025-10-20T08:15:23.271Z (8 months ago)
• Topics: background-slider, css-transitions, gallery-images, gsap-animation, html-css-js, image-slider, interactive-gallery, javascript-ui, js-carousel, landing-pages, lightweight-slider, popup-video, responsive-designs, swiperjs, travel-ui, travel-website-frontend, tropical-theme, ui-design, web-animations, webdesign
• Language: SCSS
• Homepage: https://background-slider-travel.netlify.app/
• Size: 2.17 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
  

    

      

    

    

  
🌴 Slider de Fond  –  Voyage
  



## 
 📌 Sommaire

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


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


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


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


## 
 🎨 Introduction

Slider immersif de destinations exotiques, conçu en **HTML**, **CSS** et **JavaScript**, avec **Swiper.js**, animations **GSAP** et système de vidéo popup. Chaque slide présente une île paradisiaque avec visuel plein écran, texte descriptif et transition fluide.

Parfait pour les agences de voyage, sites touristiques ou pages promotionnelles, ce slider responsive offre une expérience visuelle engageante et dépaysante.

## 
 🛠️ 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 slider principal et vignettes

- [GSAP](https://greensock.com/gsap/) pour animations d’entrée

- [Remix Icons](https://remixicon.com/) pour les icônes vectorielles

## 
 🎯 Fonctionnalités

- Slider avec effet fade entre les destinations

- Navigation par vignettes synchronisée

- Animation texte fluide via GSAP

- Popup vidéo pour chaque slide

- Design responsive 100% mobile

- Menu responsive avec toggle

- Slider contrôlable au clic

- Structure modulaire et scalable

## 
 🚀 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/background-slider-travel_js

cd background-slider-travel_js

```

### ▶️ Lancer le projet

Ouvre le fichier `index.html` dans ton navigateur, ou utilise **Live Server** pour un affichage fluide local.