• ACCUEIL
  • blogger

    3 sliders -diaporamas classiques

     3 SLIDERS classiques

    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

    Ces sliders,  sont relativement  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 MANUEL avec commentaire sur la photo (css et javascript)
    2-INTÉGRER UN SLIDER AUTOMATIQUE avec  commentaire sur la photo (
    css et javascript)
    3-INTÉGRER UN SLIDER MANUEL avec commentaire sous la photo 

    1-AFFICHAGE SLIDER MANUEL avec un commentaire sur la photo
    1 / 3
    Renardeau 1
    2 / 3
    Renardeau 2
    3 / 3
    Renardeau 3







    TUTORIEL 
    Source du code 
    -Copier/coller en mode HTML le code ci-dessous-vous devez  indiquer l'URL et le texte de chaque photo

    1 / 3</div>
    <img src="URL IMAGE 1" style="width: 100%;" />
    <div class="text">texte a afficher</div></div>


    -vous pouvez ajouter d'autres photos en ajoutant le bloc de code ci dessus au bon endroit, sans oublier aussi d'ajouter le code ci-dessous pour ajouter un bouton

    <span class="dot" onclick="currentSlide(1)"></span>

    LE CODE pour 3 photos










    2-AFFICHAGE SLIDER AUTOMATIQUE avec un commentaire sur la photo

    1 / 3
    Renardeau,Normandie
    2 / 3
    Renardeau,Normandie
    3 / 3
    Renardeau,Normandie





    TUTORIEL
    Source du code 

    -copier/coller le code ci-dessous
    -vous devez indiquer l'URL et le texte de chaque photo
    <img src="URL photo 1" style="width: 100%;" />
    <div class="text"> texte photo 1</div>

    - vous pouvez faire varier la vitesse : chiffre 2000 (en bas du code)

    -vous pouvez ajouter d'autres photos en ajoutant  au bon endroit !
    le bloc de code (et renuméroter) :
    1 / 3</div>
    <img src="URL photo 1" style="width: 100%;" />
            <div class="text">
    texte 1</div>
    </div>
    <div class="mySlides fade">
            <div class="numbertext">

     le code ci-dessous pour ajouter un bouton

    <span class="dot" onclick="currentSlide(1)"></span>




    CODE pour 3 photos





    3-DIAPORAMA MANUEL avec commentaire sous la photo
    .

    TUTORIEL
    • Copier/coller le code ci-ssous en mode HTML
    • Attention nécessite des photos toutes  de même sens  (horizontal ou vertical): sinon problème, cas ici dans la photo 2 verticale!
    • Dans le code, il suffit :
      •  d'ajouter
        •  les URL des images  => URL image 1
        •  l'URL du lien éventuel => URL LIEN pour image 1 (si non indiquer  la même  URL d'image)
        •  le texte de l'image => Légende 1 (facultatif)
      •  adapter  si nécessaire les dimensions des photos via =>
        <img style="width: 800px; height: 450px

    CODE