Personnaliser le Carrousel

⚠️ Le composant Carousel v1 nécessite la version complète de Bootstrap.
Allez dans les propriétés du site.
Librairies CSS/JS / choisir librairie bootstrap complète.

Image 1

Image 2

Image 3

Personnaliser le carrousel V1

Changer les flèches de contrôle par des images persos.

Le css à placer dans le css du carrousel :

                        .$ .carousel-control-prev-icon {
                        background-image: url("wa_res/icons/prev-64.png?t=da06d276_0680_46b6_aadf_fe6d3a58c4a4");
                        }
                        .$ .carousel-control-next-icon {
                        background-image: url("wa_res/icons/next-64.png?t=da06d276_0680_46b6_aadf_fe6d3a58c4a4");
                        }
                        .$ .carousel-control-next-icon, .carousel-control-prev-icon {
                        width: 3rem;
                        height: 3rem;
                        }

Il faudra avant charger les images en svg ou png les 2 fonctionnent, dans le « gestionnaire des images à taille fixe »
Et ensuite dans le code juste changer le nom de l’image (surligné en jaune) par le nom de votre image (pas d’espace ni accent dans le nom de l’image) et réglage de la taille de l’image control, surligné en bleu.

Pour avoir les coins du carrousel arrondis.
Le css à placer dans le css du carrousel :

                        .$ .carousel-inner {
                        border-radius: 30px;
                        }

Pour personnaliser la couleur et la taille de la police de la description d'une image.
Le css à placer dans le css du carrousel :

                        .$ .carousel-caption {
                        font-size: 30px;
                        color: #ff6f1e;
                        }

Si on veut mettre un fond teinté transparent derrière le texte on ajoutera un background

                        .$ .carousel-caption {
                        font-size: 30px;
                        color: #ff6f1e;
                        background:rgba(0, 0, 0, 0.30);
                        }

Validation W3C

Slider et Image

Accordion

Divers 1

Divers 2

Mascarade

Lumière

Couché de soleil

Le Crozon