Carrusel

A la nova versió de Genweb teniu diferents alternatives per construir un carrusel, ja que a banda de la plantilla interactiva que oferim dins de l'editor Tiny, ara disposeu d'un contingut específic .

Carrusel d'imatges sense editar codi HTML

Fes servir el nou contingut "Carrusel" des de l'opció del menú d'edició "Afegir". Crearàs una carpeta que conté les imatges del carrusel.

Si aquest contingut interactiu ha de formar part d'una pàgina que conté altres continguts, feu servir el contingut Graella de portlets, i afegiu el vostre carrusel amb un portlet de Contingut existent intern.

 El nou contingut "Carrusel" ofereix un botó de "Copiar HTML" , que ens permet copiar el codi per després incrustar-ho al lloc de la nostra pàgina a on volem que aparegui. Però cada vegada que modifiquem el contingut hem de tornar a copiar el codi, no s'actualitza automàticament .

Opció del menú d'edició Afegir, amb el tipus de contingut carrusel assenyalat .

Carrusel d'imatges editant codi HTML

Fes servir la plantilla carrusel disponible al Tiny. Això et permetrà no només crear un carrusel d'imatges, sinó també carrusels en els quals les imatges enllacen a altres continguts.

Com ho fem?

Seleccionar la plantilla

Obrirem l'editor del Genweb i buscarem el botó que ens permet obrir uns continguts predefinits, en concret l'anomenat "inserir plantilla" , el qual ens deixa inserir trossos de codi html que hem d'adaptar a la realitat que volem, sovint editant codi html.

Farem clic a la barra d'eines a la part superior i del desplegable seleccionarem l'item que diu " Interactiu - Carrusel" . Tot seguit farem clic al botó de la part inferior on posa   Desa . D'aquesta forma el codi predefinit a la plantilla s'inserirà a la posició en la qual hàgim deixat el cursor a l'editor de la nostra pàgina (per defecte o inserirà a l'inici del document).

Visualitzar el codi HTML

El codi html és bàsic per a editar continguts en qualsevol plataforma CMS, com per exemple, aquesta. És per això que us deixem un enllaç a aquest tutorial , on podeu trobar una guia de referència .

Un cop tenim carregada la plantilla podem accedir al codi fent clic al botó "codi font" de la barra d'eines del nostre editor.

Interpretar el codi HTML

És aconsellable tenir un editor html extern , ja que, per segons quin nivell d'edició de codi, ens resultarà més fàcil editar el codi en aquests programes i inserir-lo de nou un cop editat a l'editor Tiny. Qualsevol que us sigui còmode és vàlid (instal·lat o on-line) però nosaltres us recomanem Microsoft Visual Studio Code .

Tenim la documentació oficial del carrusel al web Bootstrap

Què ens trobem en enganxar el codi de la plantilla?

En aquests exemples de codi podeu veure comentaris (entre els caràcters /* comentaris */) on s'explica pas a pas el que significa cada cosa al codi html de la plantilla.

Personalitzar el nostre Carrusel

In aliquam rhoncus sem. Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodales eget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementum purus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin a lorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus.

Autoplay

Podeu fer que els vostres carrusels es reprodueixin automàticament a la càrrega de la pàgina configurant l'opció del contenidor del carrusel data-bs-ride="carousel" . Els carrusels de reproducció automàtica s'aturen automàticament mentre es passa el cursor amb el ratolí . Als navegadors que admeten l'API de visibilitat de la pàgina, el carrusel deixarà de circular quan la pàgina web no sigui visible per a l'usuari (com ara quan la pestanya del navegador estigui inactiva o quan la finestra del navegador estigui minimitzada).


Quan l'opció de viatge s'estableix com a data-bs-ride="true" , en lloc de "carousel", el carrusel no començarà a circular automàticament en carregar la pàgina. En canvi, només començarà després de la primera interacció de l'usuari.

 Autoplay i Accessibilitat

Per motius d'accessibilitat, us recomanem que eviteu l'ús de carrusels de reproducció automàtica . Si la vostra pàgina inclou un carrusel de reproducció automàtica, us recomanem que proporcioneu un botó o control addicional per posar en pausa/aturar el carrusel de manera explícita.

Vegeu WCAG 2.1 Success Criterion 2.2.2 Pause, Stop, Hide .


Teniu més informació a la documentació oficial de Bootstrap sobre autoplay de carrusel

 

Intervals

Afegiu data-bs-interval="" a un ítem .carousel per canviar la quantitat de temps que cal esperar (en milisegons) entre el desplaçament automàtic a l'element següent.

T'ho expliquem al següent videotutorial