Unito.it

Tema Unito v3

Carousel

Un componente di presentazione per scorrere elementi, immagini o diapositive di testo. Include anche il supporto per i controlli e gli indicatori precedente/successivo ed i dots di indicazione posizione.

Implementazione

Il carousel permette di scorrere una serie di contenuti ed è realizzato con trasformazioni CSS 3D e JavaScript. Può essere utilizzato con una serie di immagini, testo o codice personalizzato. Include anche il supporto per i controlli e gli indicatori precedente/successivo ed i dots di indicazione posizione.

Il carousel può contenere vari tipi di componenti, solitamente cards o immagini.

Il plugin utilizzato è Splide.

Carousel con Card Articolo

Classi da applicare:

  • div it-carousel-wrapper : viene aggiunta la classe it-carousel-landscape-abstract-three-cols che attiva la visualizzazione a 3 colonne su desktop.
  • div splide__track : vengono aggiunte le classi ps-lg-3 pe-lg-3 che implementano il padding richiesto dal breakpoint lg in su.
<div class="row">
    <div class="container">
        <div class="col-10 m-auto it-carousel-wrapper splide it-carousel-landscape-abstract-three-cols-arrow-visible" data-bs-carousel-splide>
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide lined_slide">
                <div class="it-single-slide-wrapper">
                  <div class="card-wrapper">
                    <div class="card">
                      <div class="card-body">
                        <div class="category-top">
                          <a class="category" href="#">Categoria</a>
                          <span class="data">10/12/2023</span>
                        </div>
                        <h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <span class="card-signature">di Federico De Paolis</span>
                        <a class="read-more" href="#">
                          <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                          <svg class="icon">
                            <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                          </svg>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="splide__slide lined_slide">
                <div class="it-single-slide-wrapper">
                  <div class="card-wrapper">
                    <div class="card">
                      <div class="card-body">
                        <div class="category-top">
                          <a class="category" href="#">Categoria</a>
                          <span class="data">10/12/2023</span>
                        </div>
                        <h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <span class="card-signature">di Federico De Paolis</span>
                        <a class="read-more" href="#">
                          <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                          <svg class="icon">
                            <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                          </svg>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="splide__slide lined_slide">
                <div class="it-single-slide-wrapper">
                  <div class="card-wrapper">
                    <div class="card">
                      <div class="card-body">
                        <div class="category-top">
                          <a class="category" href="#">Categoria</a>
                          <span class="data">10/12/2023</span>
                        </div>
                        <h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <span class="card-signature">di Federico De Paolis</span>
                        <a class="read-more" href="#">
                          <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                          <svg class="icon">
                            <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                          </svg>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="splide__slide lined_slide">
                <div class="it-single-slide-wrapper">
                  <div class="card-wrapper">
                    <div class="card">
                      <div class="card-body">
                        <div class="category-top">
                          <a class="category" href="#">Categoria</a>
                          <span class="data">10/12/2023</span>
                        </div>
                        <h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <span class="card-signature">di Federico De Paolis</span>
                        <a class="read-more" href="#">
                          <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                          <svg class="icon">
                            <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                          </svg>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
    </div>
</div>

Carousel con Card ed immagine in evidenza

Contiene un’immagine associata ad una card “articolo”.

Classi da applicare:

  • div it-carousel-wrapper: viene aggiunta la classe it-carousel-landscape-abstract che attiva la visualizzazione a 2 colonne in Flex.
  • descrizione immagine
    Categoria 10/12/2023
    Lorem ipsum dolor sit amet, consectetur adipiscing elit…

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    di Federico De Paolis Leggi di più
  • descrizione immagine
    Categoria 10/12/2023
    Lorem ipsum dolor sit amet, consectetur adipiscing elit…

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    di Federico De Paolis Leggi di più
  • descrizione immagine
    Categoria 10/12/2023
    Lorem ipsum dolor sit amet, consectetur adipiscing elit…

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    di Federico De Paolis Leggi di più 
<div class="it-carousel-wrapper it-carousel-landscape-abstract splide" data-bs-carousel-splide>
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <a href="#">
            <div class="img-responsive-wrapper">
              <div class="img-responsive">
                <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
              </div>
            </div>
          </a>
          <div class="it-text-slider-wrapper-outside">
            <div class="card-wrapper">
              <div class="card">
                <div class="card-body">
                  <div class="category-top">
                    <a class="category" href="#">Categoria</a>
                    <span class="data">10/12/2023</span>
                  </div>
                  <h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  <span class="card-signature">di Federico De Paolis</span>
                  <a class="read-more" href="#">
                  <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                    <svg class="icon">
                      <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <a href="#">
            <div class="img-responsive-wrapper">
              <div class="img-responsive">
                <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
              </div>
            </div>
          </a>
          <div class="it-text-slider-wrapper-outside">
            <div class="card-wrapper">
              <div class="card">
                <div class="card-body">
                  <div class="category-top">
                    <a class="category" href="#">Categoria</a>
                    <span class="data">10/12/2023</span>
                  </div>
                  <h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  <span class="card-signature">di Federico De Paolis</span>
                  <a class="read-more" href="#">
                  <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                    <svg class="icon">
                      <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <a href="#">
            <div class="img-responsive-wrapper">
              <div class="img-responsive">
                <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
              </div>
            </div>
          </a>
          <div class="it-text-slider-wrapper-outside">
            <div class="card-wrapper">
              <div class="card">
                <div class="card-body">
                  <div class="category-top">
                    <a class="category" href="#">Categoria</a>
                    <span class="data">10/12/2023</span>
                  </div>
                  <h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  <span class="card-signature">di Federico De Paolis</span>
                  <a class="read-more" href="#">
                  <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                    <svg class="icon">
                      <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Carousel con Card ed immagine in alto

Classi da applicare:

  • div it-carousel-wrapper: viene aggiunta la classe it-carousel-landscape-abstract-three-cols per la visualizzazione a 3 colonne.
<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols splide" data-bs-carousel-splide>
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <div class="card-wrapper">
            <div class="card card-img no-after">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
                </div>
              </div>
              <div class="card-body px-3 px-md-4">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <a class="read-more" href="#">
                  <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                  <svg class="icon">
                    <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <div class="card-wrapper">
            <div class="card card-img no-after">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine2" title="titolo immagine" alt="descrizione immagine"></div>
                </div>
              </div>
              <div class="card-body px-3 px-md-4">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <a class="read-more" href="#">
                  <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                  <svg class="icon">
                    <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <div class="card-wrapper">
            <div class="card card-img no-after">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine3" title="titolo immagine" alt="descrizione immagine"></div>
                </div>
              </div>
              <div class="card-body px-3 px-md-4">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <a class="read-more" href="#">
                  <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                  <svg class="icon">
                    <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <div class="card-wrapper">
            <div class="card card-img no-after">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine4" title="titolo immagine" alt="descrizione immagine"></div>
                </div>
              </div>
              <div class="card-body px-3 px-md-4">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <a class="read-more" href="#">
                  <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                  <svg class="icon">
                    <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <div class="card-wrapper">
            <div class="card card-img no-after">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine5" title="titolo immagine" alt="descrizione immagine"></div>
                </div>
              </div>
              <div class="card-body px-3 px-md-4">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <a class="read-more" href="#">
                  <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                  <svg class="icon">
                    <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <div class="card-wrapper">
            <div class="card card-img no-after">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine6" title="titolo immagine" alt="descrizione immagine"></div>
                </div>
              </div>
              <div class="card-body px-3 px-md-4">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <a class="read-more" href="#">
                  <span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
                  <svg class="icon">
                    <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Carousel con Fullscreen di Immagini

Classi da applicare:

div it-carousel-wrapper :

  • viene aggiunta la classe it-carousel-landscape-abstract-three-cols per la formattazione colonnare
  • viene aggiunta la classe it-full-carousel per la visualizzazione a tutto schermo (orizzontale)
  • viene aggiunta la classe it-big-img per indicare che l’immagine contenuta è di tipo grande
  • descrizione immagine
  • descrizione immagine
  • descrizione immagine
  • descrizione immagine
<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols it-full-carousel it-big-img splide" data-bs-carousel-splide>
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <div class="card-wrapper">
            <div class="card card-img no-after">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <div class="card-wrapper">
            <div class="card card-img no-after">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine2" title="titolo immagine" alt="descrizione immagine"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <div class="card-wrapper">
            <div class="card card-img no-after">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine3" title="titolo immagine" alt="descrizione immagine"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper">
          <div class="card-wrapper">
            <div class="card card-img no-after">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/480x360/ebebeb/808080/?text=Immagine4" title="titolo immagine" alt="descrizione immagine"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Accessibilità

Splide segue le indicazioni del W3C per l’implementazione di un carousel accessibile.

Il plugin, attraverso l’opzione i18n, offre la possibilità di tradurre le aria-label utilizzate per gli elementi di interfaccia.
Bootstrap Italia fornisce le label già tradotte in italiano come segue:

  • prev: ‘Slide precedente’
  • next: ‘Slide successiva’
  • first: ‘Vai alla prima slide’
  • last: ‘Vai all’ultima slide’
  • slideX: ‘Vai alla slide %s’
  • pageX: ‘Vai a pagina %s’
  • play: ‘Attiva autoplay’
  • pause: ‘Pausa autoplay’

Per tradurre le label in altre lingue è sufficiente utilizzare l’attributo opzionale data-splide sul div it-carousel-wrapper splide come nell’esempio seguente:

<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols splide" data-bs-carousel-splide data-splide='{"i18n":{"slideX":"Go to slide %s","pageX":"Go to page %s"}}>

Torna su