Challenge
Responsive Slider
Uno slider responsive che adatta il numero di immagini mostrate alla larghezza della viewport.
In questa challenge l’obiettivo è implementare uno slider responsivo. In particolare:
- è possibile navigare avanti e indietro con i controlli in basso a destra
- la navigazione è ciclica: arrivati alla fine e cliccando avanti si ricomincia da capo; dall’inizio, cliccando indietro, si torna alla fine
- in basso a sinistra sono presenti gli indicatori di pagina all’hover su una slide è presente un effetto di hover e deve essere mostrato un popup in overlay sulla slide
- in base alla larghezza della viewport vengono mostrate 3, 2 o 1 slide
Bonus
- navigazione automatica delle slide ogni tot secondi
- visualizzare una modale di dettaglio al click sul popup di una slide
Starter Kit
All’interno dello starter-kit sono presenti delle immagini sample per le slide, ma potete usarne anche altre.
Credits
La challenge è ispirata da questo template realizzato da Marketify (https://themeforest.net/item/edrea-personal-portfolio-template/22535185)
Consigli
Scegli le tecnologie che preferisci per affrontare la challenge. Il nostro consiglio è sempre quello di mettersi alla prova con qualcosa di nuovo, che sia un linguaggio, un argomento o una funzionalità. Se può aiutarti puoi partire da una versione statica e aggiungere dinamicità un passo alla volta.