Breadcrumbs

Carousel esempio 2

Un esempio di carousel dove le slide sono fatte di solo testo e scorrono su un'immagine fissa.

Il codice utilizzato per realizzare tale interessante soluzione di carousel è quello di un esempio sul sito di Codeply: "Bootstrap 4 text carousel".

Il codice di Codeply non prevedeva l'immagine in background come è stato realizzato in questa pagina, per cui, ma non solo per questo, è stato modificato fino a raggiungere l'effetto voluto.

Questo il codice che vedete in azione:


<div id="TextCarousel" class="carousel slide carousel-fade" style="background-image: url('//www.disegnareilweb.cloud/HUB4/images/headertest/header4.jpg'); background-size: cover; background-position: 70% 0%;" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#TextCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#TextCarousel" data-slide-to="1"></li>
    <li data-target="#TextCarousel" data-slide-to="2"></li>
  </ol>
<div class="carousel-inner height">
<div class="carousel-item active text-center p-4" style="height: 500px;">
<div class="carousel-caption caption-margin">
<h1 style="color: red;">SLIDE DI TESTO...</h1>
</div>
</div>
<div class="carousel-item text-center p-4" style="height: 500px;">
<div class="carousel-caption caption-margin">
<h1 style="color: red;">SU IMMAGINE FISSA</h1>
</div>
</div>
<div class="carousel-item text-center p-4" style="height: 500px;">
<div class="carousel-caption caption-margin">
<h1 style="color: red;">CON EFFETTO FADE!</h1>
</div>
</div>
</div>

Le differenze rispetto all'esempio di Codeply non si fermano, naturalmente, solo al fatto di aver inserito l'immagine di background, ma è stata proprio la necessità di avere un'immagine di sfondo a richiedere alcune modifiche e aggiunte al codice originale.

Il carousel gira in un modulo personalizzato nella posizione "Title" del template, e la prima esigenza è stata quella di impostare un'altezza ai tre div corrispondenti alle tra slide di testo.
Per fare questo ho utilizzato una dichiarazione inline nell'html del carousel:

<div class="carousel-item active text-center p-4" style="height: 500px;">

L'altezza di 500px è, gioca forza, l'altezza dell'immagine utilizzata come sfondo.

Per ottimizzare e armonizzare la funzionalità responsive del carousel ho impostato poi una piccola serie di "media queries" che, al diminuire della risoluzione del device sul quale si visualizza la slide, riducono l'altezza dell'immagine; queste le media queries:

@media screen and (max-width: 992px) {
  .height {
    height: 400px;
  }
}

@media screen and (max-width: 600px) {
  .height {
    height: 300px;
  }
}

Come si vede ho creato la classe "height" che viene richiamata nell'html del carousel in questo div:

<div class="carousel-inner height">

I due breakpoints utilizzati funzionano bene (naturalmente se ne possono impostare altri e diversi a seconda dei casi e delle esigenze di visualizzazione), ma ho ritenuto opportuno intervenire anche sulla dimensione del tag H1 utilizzato per il testo delle slide, utilizzando le media queries (con gli stessi breakpoints di prima) per diminuire la dimensione del font al diminuire della risoluzione del monitor:

@media screen and (max-width: 992px) {
  .carousel-caption h1 {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 600px) {
  .carousel-caption h1 {
    font-size: 1.8rem;
  }
}

Le didascalie

Dedicherò parecchio spazio a questa sezione dell'articolo, ma credo che la motivazione sia quasi scontata e chiara: si tratta di un Carousel di testo.

I più attenti avranno rilevato che la colorazione in rosso del testo è stata ottenuta con l'utilizzo di codice inline (naturalmente e anche preferibilmente sostituibile con un'apposita classe css):

<h1 style="color: red;">SLIDE DI TESTO...</h1>

Il codice di Bootstrap 4 relativo alle didascalie del Carousel prevede per default che esse compaiano a ridosso del margine inferiore dell'immagine, secondo queste regole css della classe "carousel-caption":

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}

Per chi, invece, volesse spostarle al margine superiore, basta aggiungere questa classe css:

.carousel-caption {
    top: 0;
    bottom: auto;
}

Nel caso si volesse posizionare le didascalie in una qualunque posizione intermedia tra le due succitate, è necessario impostare dei valori per il parametro "margin", e le vie possibili sono naturalmente due: o "margin-bottom", o "margin-top". Vediamo come procedere.
Per impostare un margin-bottom si può rapidamente utilizzare il codice inline, come in questo esempio:

<div class="carousel-caption" style="margin-bottom: 35vh;">
Il codice così scritto sistema i testi a circa 3/4 dal margine inferiore.
Da osservare l'utilizzo di una misura "relativa" e non una "assoluta" in px (vedremo più avanti il perché di questa scelta).

Una piccola ma importante osservazione: può capitare che le didascalie che nei viewport di dimensioni maggiori stanno comodamente su una sola riga, al restringersi di questi - penso soprattutto alla tipica visualizzazione da smartphone in formato portrait - si sistemino su due o anche tre righe. In fase di impostazione del Carousel sarà quindi necessario porre molta attenzione alla misura del margin-bottom, per evitare che parte del testo non sia più visibile perché spinto fuori dal div verso l'alto...

ma nell'esempio di questa pagina esse occupano una posizione a cira 2/3 dell'altezza dell'immagine.
Il primo passo per spostare le didascalie in una posizione diversa da quella originale è l'utilizzo di questa regola css:

.carousel-caption {
    top: 0;
    bottom: auto;
}

Tale regola allinea i testi al bordo superiore dell'immagine.

Per impostare una posizione intermedia si può facilmente utilizzare un codice inline del tipo:

<div class="carousel-caption" style="margin-top: 12vh;">

che stabilisce la distanza dal margine superiore dell'immagine (la misura riportata è esattamente quella utilizzata in questo mio esempio).

Invece di utilizzare il codice inline, ho creato una muova classe che ho semplicemente chiamato "caption-margin" e che viene quindi richiamata in questo modo:

<div class="carousel-caption caption-margin">

classe che, come ho scritto poco sopra, stabilisce la distanza dal margine superiore dell'immagine in una misura pari a 12vh.

Tutto funziona perfettamente, ma ancora una volta ho fatto ricorso alle media queries per modificare la misura del margin-top al di sotto di una certa risoluzione. La scelta è stata dettata dal fatto che i testi, al restringersi del viewport, risultavano un po' troppo in basso per cui, un po' per esercizio di stile e un po' per maniacale pignoleria, ho ridotto a 8hv il margin-top dai 992px in giù.
Le media queries utilizzate a tal scopo sono queste:

@media screen and (min-width: 993px) {
  .caption-margin {
    margin-top: 12vh;
  }
}

@media screen and (max-width: 992px) {
  .caption-margin {
    margin-top: 8vh;
  }
}

Stampa   Email