Definiamo nella pagina index un array con i dati delle slide:
let slides = [
{
titolo: 'Fatti un bel giro',
descrizione: 'Scopri tutti i segreti del nostro Centro con il tour virtuale!',
immagine: 'https://source.unsplash.com/random',
colore: "#ED4C67",
opacity: 0.5,
blur: "0.5rem",
buttonText: 'Scopri di più!',
buttonUrl: 'https:...',
},
{
titolo: 'Concorso nazionale settore elettrico',
descrizione: "A maggio il nostro Centro avrà l'onore di ospitare il Concorso Nazionale del Settore Elettrico: tutti i Centri di Formazione Professionale salesiani d'Italia invieranno i loro campioni per una settimana di sfida e condivisione professionale...",
colore: '#22aa22',
colore2: 'transparent', // opzionale, per realizzare gradienti, può essere un rgba e viene comunque usata anche opacity
},
]
buttonText e buttonUrl sono facoltative;
se buttonUrl non è presente il bottone non viene visualizzato.
Importiamo il nostro componente Carousel passandogli le slide e la larghezza desiderata (false fa sì che il carousel si estenda all'intero schermo):
<Carousel
slides={slides}
maxWidth={false}
height="90"
>