Menu
Coddy logo textTech
INIZIA A IMPARARE
flag It iconItalianodown icon

Classe Carousel

Lezione 15 di 23 del corso Slider | Progetto front-end di Coddy.

challenge icon

Sfida

Facile

Nella classe wrapper, seleziona la classe carousel:

1. Imposta display su grid.

2. Imposta grid-auto-flow su column.

3. Imposta grid-auto-column su calc((100% / 3) - 12px).

4. Imposta l'overflow sull'asse x su auto.

5. Imposta scroll-snap-type su x mandatory.

6. Imposta gap su 16px.

7. Imposta il raggio del bordo a tua scelta.

8. Imposta il comportamento di scorrimento su smooth.

9. Imposta la larghezza della barra di scorrimento su none.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi qui il codice HTML -->
        <script src="script.js"></script>
    </body>
</html>

Tutte le lezioni di Slider | Progetto front-end

1Introduzione

Che cosa realizzerai?

4CSS II

Classe CarouselLezione di progettoNella classe CarouselLezione di progettoClasse CardLezione di progettoL'immagineLezione di progettoIntestazioneLezione di progettoSpanLezione di progettoAdattabilitàLezione di progetto

2HTML

Titolo e CSS esternoContenitore e iconeLezione di progettoIcone a sinistra e a destraLezione di progettoScheda - ILezione di progettoScheda - IILezione di progettoScheda - IIILezione di progettoScheda - IVLezione di progettoAltre schedeLezione di progetto

5JavaScript

Clic con el botón derechoLezione di progettoClic con el botón izquierdoLezione di progetto

3CSS I

Selettore universaleLezione di progettoBodyLezione di progettoClasse wrapperLezione di progettoIcone - ILezione di progettoIcone - IILezione di progetto

Esercitati da solo: Playground Web