Carousel

Els carrusels són requadres amb una imatge de fons que canvia automàticament cada pocs segons. Un bon exemple de carrusel és la mateixa portada d'uvic.cat.

Els carrusels són molt atractius a la vista però carreguen el node i el temps de descàrrega de la pàgina es veu afectat. Cal valorar bé si el carrusel aportarà valor al node o no.

Carrusel bàsic

Per afegir un carrusel simple cal enganxar el següent font del node que volem editar:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <!-- ... -->
  </div>
</div>

Caldrà que canviïs la id del contenidor principal (carouselExampleSlidesOnly), per la id que vulguis, l'únic requisit és que sigui única a tot el node.

Un cop creat carrusel, cal que afegim les diapositives. Per fer-ho, has de modificar la següent estructura per cada diapositiva:

<div class="carousel-item active">
    <img class="d-block w-100" src="urlImatge" alt="descripcióImatge">
</div>

Caldrà que canviïs l'atribut src (urlImatge), pels URL de la imatge que vulguis, i l'atribut alt (descripcióImatge), per un a la imatge.

Finalment, has de substituir el codi  pel codi creat anteriorment.

Imatges amb descripció

Si necessites que les imatges tinguin una breu descripció, hauràs d'utilitzar aquesta altra plantilla per fer el codi de cada diapositiva:

<div class="carousel-item">
  <img class="d-block w-100" src="https://dummyimage.com/600x400/aaccff/ffffff&text=Diapositiva" alt="Diapositiva">	
  <div class="carousel-caption d-none d-md-block">
    <h5>Lorem Ipsum</h5>
    <p>Voluptate beatae nisi velit maiores ratione necessitatibus totam atque fugit molestiae tempore!</p>
  </div>
</div>

Carrusel amb controls

Si vols que el carrusel tingui unes fletxes de navegació al costat caldrà que afegeixis el següent bloc:

<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

A sota del bloc:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <!-- Codi intern del Carousel -->
</div>

Carrusel amb indicadors

Si vols que el carrusel tingui uns indicadors de diapositiva, caldrà que afegeixis el següent bloc:

<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

A sobre del bloc:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <!-- Codi intern del Carousel -->
</div>

AnteriorIcones SiguienteColumnes

Última actualización hace 4 años