• ACCUEIL
  • blogger

    3 SLIDERS très simples

    SLIDER ?
    Un slider (nommé aussi "carrousel") est un module intégré à un blog ou une page web qui permet le défilement de plusieurs images ("slides").. Le slider se trouve soit sur la page d’accueil en dessous de la barre du menu ("bannière"), soit dans un article comme illustration ou de présentation de photos ("diaporama". Il peut être composé de 2, 3, 4 ou plus... images qui s’affichent les unes après les autres, soit automatiquement (après un délai fixe), soit manuellement en cliquant sur un bouton.

    Pour afficher un slider , il faut avoir du "code HTML..." à intégrer dans le blog en mode HTML. Une recherche sur Internet  montre qu'il existe de très nombreux "codes" pour réaliser un slider/diaporama mais quasiment tous  nécessitent de modifier le CSS ou Template, ce qui n'est pas aisé  à faire dans un blog avec Blogger, surtout pour un non spécialiste.... 
    Afin d'avoir  un code simple  à intégrer, nous ne présentons que du code formant un seul "bloc" s'intégrant en totalité dans un article de blog  ou dans un gadget HTML, sans modifier le CSS/Template d'origine du blog.

    Ce code, à intégrer en mode HTML, est plus ou moins long et complexe à configurer selon son graphisme et ses possibilités techniques. Nous présentons donc les sliders en fonction de leur difficulté de configuration : longueur du code et nombre et difficulté des modifications à réaliser

    Pour débuter, bous conseillons d'utiliser et choisir parmi ces 3 sliders légers, très simples à comprendre et à configurer. Il est conseillé d'utiliser des photos d'une même taille et d'une même orientation (verticale ou horizontale)

    1-INTÉGRER UN SLIDER AUTOMATIQUE (défilement automatique des photos)
    2-INTÉGRER UN SLIDER MANUEL (défilement manuel des photos via une flèche + légende photo)
    2-INTÉGRER UN SLIDER MANUEL (défilement manuel des photos via une flèche)



    1-INTÉGRER UN SLIDER AUTOMATIQUE : 

    Pour créer ce diaporama avec défilement automatique d'images, on utilise un code en 3 parties, regroupé en un seul bloc,  à intégrer en mode HTML sur le Blog. 

    TUTORIEL Le code présenté est hyper simplifié, voici quelques explications :

    -Ce code forme un bloc  situé dans la balise conteneur  <div>...</div>
     qui comprend <class="slideshow"> pour attribuer le style à un ensemble nommé "slideshow"

    -CSS   ( de <style>...  </style>)
    Il indique la mise en page (couleurs, bordures, taille...) du diaporama (il faudra indiquer  2 fois la taille des images, ici   width: 600pxheight: 450px;)

    -Javascript ( de <script>...  </script>)
    Il  procède au fonctionnement, ici le défilement des images (il faudra si nécessaire modifier cette vitesse chiffre  "800" mis  à "400" dans le diaporama de démo)

    -HTML ( de <ul>...  </ul>)
    Il liste les images dans une liste ordonnée  "ul" comprenant les éléments "li"  qui indiquent l'adresseURL de l'image : il vous faudra indiquer l'URL de vos images et leur taille)
    <img src="https://drive.google.com/uc?id=1r7P0bhRFClKbLAdu9o5YHJ1S" alt="" width="600" height="450" />


    CODE




    AFFICHAGE : DIAPORAMA AUTOMATIQUE





    2-INTÉGRER UN SLIDER  MANUEL TRÈS SIMPLE
    avec défilement manuel  (flèches) de vos photos

    Cet article présente un slider-diaporama très simple à déroulement manuel via des flèches.

    TUTORIEL

    1-Vous avez des photos  de même taille
    et surtout présentées  à l'identique (toutes horizontales ou verticales, pas de mélange).
    Dans la démo, nous avons volontairement mis 3 photos horizontales et une verticale

    2-Vous avez l'adresse URL  y compris si elles sont stockées sur Drive! 

    3-Il suffit de copier/coller le code ci-dessous en mode HTML

    4-Modifier le code
    -en y indiquant l'URL de vos photos 
    (ici 4 photos de 0 à 3)
    dans la rubrique var dia1Image = new Array();
    dia1Image[0] = 'https://drive.google.com/uc?id=1r7P0bhFG22ZJlKbLAdu9oDYU5YHJ1S

    -en précisant la taille des photos dans cette partie du code 
    width: 800px; height: 450px

    5-Vous pouvez  préciser  dans le code :-
    dans la rubrique dia1Lien = new Array();
    les URL pour mettre un lien sur l'image

    -dans la rubrique var dia1Legende = new Array()
    le texte pour afficher une légende aux photos

    6-Vous pouvez ajouter au code
    -un titre au-dessus du diaporama
    Il faut ajouter le code qui suit juste avant : <script language='JavaScript'>dia1demarrage()</script>.
    <div id="titre" style="margin: 0;padding:0;background:#ddd;width:800px;">TITRE</div>

    Remarque : 800px doit être remplacé par la largeur de l'image.

    -Un démarrage du diaporama avec la même image, remplacer dans le code:
    var compteurdia1 = parseInt(Math.random()*Imagedia1.length);
    par
    compteurdia1 = 1;



    CODE A INTEGRER

    Source du code






    AFFICHAGE  : LE DIAPORAMA avec 3 photos horizontales et une verticale donc problème ! il faut utiliser des photos de même sens



    .



    3-INTÉGRER UN DIAPORAMA MANUEL ( tout CSS)


    TUTORIEL
    => source

    Ce slider est original : il est uniquement constitué  d'un CSS, sans javascript ou autre.
    En principe, vous pouvez utiliser des photos de taille légèrement différente et d'orientation différente, mais il vous faudra trouver pour "le container" la taille idéale pour l'affichage...

    Il faudra modifier :
    -les dimensions
    .slider-container {
          height: 540px;
          width: 800px;

    -les URL des photos
    .slide-1 {
          background-image: url("URL Photo 1");

    -Possibilité d'ajouter d'autres photos mais il y  a 3 blocs de code  à ajouter, au bon endroit !

     .slide-5 {
          background-image: url("URL Photo 4");
          }

     <label for="slide-dot-5"></label>

    <input id="slide-dot-5" name="slides" type="radio" />
          <div class="slide slide-5">


    CODE pour 4 photos



    AFFICHAGE  du  DIAPORAMA