Bandeau
SpipFactory
.fr .com .org

C’est une plateforme d’hébergement autogéré en association de loi 1901
Propulsée par la mutualisation de Spip sous Habillage Escal

NivoSlider
Article mis en ligne le 28 novembre 2022
dernière modification le 26 août 2024

Diaporama jQuery avec de belles transitions !

un bandeau avec des images qui défilent de façon élégante.

Plugin Nivoslider

Pour mettre un tel bandeau en place, on va :

  • installer le plugin NivoSlider, évidemment
  • créer un article dans une rubrique invisible dans les menus grâce aux mots-clés adéquats
  • joindre à cet article les images que l’on veut, en les ayant retaillées en amont (largeur = celle du site, hauteur au choix mais identique pour toutes les images)
  • publier l’article 😉
  • dans la configuration de NivoSlider, régler la largeur et la hauteur en fonction de vos images et indiquer l’article créé comme réservoir d’images (les autres réglages sont à votre convenance)
  • modifier /squelettes/perso.css en rajoutant
        /* espace au dessus du bandeau */
        div#bandeau {
        padding-top: 20px;
        }
  • reste à faire une copie de inc-bandeau.html de /escal/inclusions vers /squelettes/inclusions et dans ce fichier, effacer tout le code et mettre juste

modifier squelettes/inc-bandeau.html

[(#CONFIG{escal/config/accessibilite}|=={non}|non)
	<!-- bouton de paramètrage pour l'accessibilité -->
<div id="accessibilite">
	<div id="accessconfig"
		data-accessconfig-buttonname="<:escal:accessibilite:>"
		data-accessconfig-params='{ "Prefix" : "a42-ac", "ContainerClass" : "","ModalCloseButton" : "","ModalTitle" : "","FormFieldset" : "","FormFieldsetLegend" : "","FormRadio" : ""}' >
	</div>
	<a class="skip-link" href="#contenu"><:lien_rapide_contenu:></a>
	<span class="separateur">|</span>
	<a class="skip-link" href="#formulaire_recherche"><:lien_rapide_recherche:></a>
	<span class="separateur">|</span>
	<a class="skip-link" href="#pied"><:escal:lien_rapide_pied:></a>
	<div class="nettoyeur">
	</div>
</div>
]
    <div id="bandeau">
        [(#MODELE{nivoslider})]
    </div>

    <div class="nettoyeur"></div>

Remarque : le code prend en compte le bouton accessibilité

Ça pourrait donner ceci :
<nivoslider_doc|id=427,428,429,430,431,432,433|>


« Sur SpipFactory, le bug vient souvent de l’interface entre la chaise et le clavier »
Plan du site Mentions légales

PageSpeed Insights
SEO


2017-2024 © SpipFactory - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.2.1
Hébergeur : SpipFactory
Soutenir par un don