Partage
  • Partager sur Facebook
  • Partager sur Twitter

Diaporama HTML/CSS

    26 janvier 2013 à 14:08:42

    Bonjour à tous,

    Quel beau design :D

    Voilà, je voudrais savoir si quelqu'un aurait le lien du tuto/tp pour créer un diaporama en html et css ? Je ne trouve plus le sujet.

    Merci d'avance

    • Partager sur Facebook
    • Partager sur Twitter
      26 janvier 2013 à 14:14:46

      Bonjours ! , personnellement je n'est pas trouver en HTML/CSS , mais sur mon site j'utilise ce-ci 

      <DIV ID=ejs_photo_box></div>
      				<SCRIPT LANGUAGE=JavaScript>
      					ejs_photo = new Array;
      					ejs_photo[0] = 'images/v1.jpg';
      					ejs_photo[1] = 'images/v2.jpg';
      					ejs_photo[2] = 'images/v3.jpg';
      					ejs_photo[3] = 'images/v4.jpg';
      					ejs_photo[4] = 'images/v5.jpg';
      					ejs_photo[5] = 'images/v6.jpg';
      					ejs_photo[6] = 'images/v7.jpg';
      	
      					function ejs_aff_photos(num)
      						{
      							if(document.getElementById)
      						{
      					ejs_fin = "";
      						if(num!=0)
      					ejs_fin += "<A HREF=# onClick='ejs_aff_photos("+(num-1)+");return(false)'>< Précédent</A>     ";
      						if(num!=(ejs_photo.length-1))
      					ejs_fin += "<A HREF=# onClick='ejs_aff_photos("+(num+1)+");return(false)'>Suivant ></A>";
      						document.getElementById("ejs_photo_box").innerHTML = "<CENTER><IMG SRC='"+ejs_photo[num]+"' BORDER=0><BR>"+ejs_fin+"</CENTER>";
      					}
      						}
      							window.onload = new Function("ejs_aff_photos(0)")
      		</script>
      	


      C'est du javascript , mais bon il est très simple d'utilisation , par exemple ejs_photo[0] = 'images/v1.jpg'; tu indique ton dossier/et le nom de ton image , essais et dit moi ce que tu en pense :D !

      Good luc & Have fun 

      • Partager sur Facebook
      • Partager sur Twitter
      --Clément BOIN
      Anonyme
        26 janvier 2013 à 14:15:24

        Bonjour,

        Je peux te conseiller ce tutoriel. ^^

        • Partager sur Facebook
        • Partager sur Twitter
          26 janvier 2013 à 15:24:38

          Bonjour,

          Merci à vous trois pour vos réponses. J'ai testé tous vos codes.

          rankER : Il est vrai que ton code est vraiment simple à comprendre, merci beaucoup pour ton aide :)

          Vayel : J'ai testé le tiens aussi mais je ne sais pas pourquoi il ne fonctionne pas, j'ai pourtant suivis le tuto :

          <style type="text/css">
          #slideshow {  
              position: relative;  
              width: 640px;  
              height: 310px;  
              padding: 15px;  
              margin: 0 auto 2em;  
              border: 1px solid #ddd;  
              background: #FFF;  
              /* CSS3 effects */  
              background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);  
              border-radius: 2px 2px 2px 2px;  
              box-shadow: 0 0 3px rgba(0,0,0, 0.2);  
          }  
             
          /* avanced box-shadow 
           * tutorial @ 
           * http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow 
          */  
          #slideshow:before,  
          #slideshow:after {  
              position: absolute;  
              bottom:16px;  
              z-index: -10;  
              width: 50%;  
              height: 20px;  
              content: " ";  
              background: rgba(0,0,0,0.1);  
              border-radius: 50%;  
              box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);  
          }  
          #slideshow:before {  
              left:0;  
              transform: rotate(-4deg);  
          }  
          #slideshow:after {  
              right:0;  
              transform: rotate(4deg);  
          }
          /* gestion des dimensions et débordement du conteneur */  
          #slideshow .container {  
              position:relative;  
              width: 640px;  
              height: 310px;  
              overflow: hidden;  
          }  
          /* on prévoit un petit espace gris pour la timeline */  
          #slideshow .container:after {  
              position:absolute;  
              bottom: 0; left:0;  
              content: " ";  
              width: 100%;  
              height: 1px;  
              background: #999;  
          }  
          /* 
             le conteneur des slides 
             en largeur il fait 100% x le nombre de slides 
          */  
          #slideshow .slider {  
              position: absolute;  
              left:0; top:0;  
              width: 400%;  
              height: 310px;  
          }  
          /* annulation des marges sur figure */  
          #slideshow figure {  
              position:relative;  
              display:inline-block;  
              padding:0; margin:0;  
          }  
          /* petit effet de vignette sur les images */  
          #slideshow figure:after {  
              position: absolute;  
              display:block;  
              content: " ";  
              top:0; left:0;  
              width: 100%; height: 100%;  
              box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;  
          }
          /* styles de nos légendes */  
          #slideshow figcaption {  
              position:absolute;  
              left:0; right:0; bottom: 5px;  
              padding: 20px;  
              margin:0;  
              border-top: 1px solid rgb(225,225,225);  
              text-align:center;  
              letter-spacing: 0.05em;  
              word-spacing: 0.05em;  
              font-family: Georgia, Times, serif;  
              background: #fff;  
              background: rgba(255,255,255,0.7);  
              color: #555;  
              text-shadow: -1px -1px 0 rgba(255,255,255,0.3);  
          }
          /* fonction d'animation, n'oubliez pas de prefixer ! */  
          @keyframes slider {  
              0%, 20%, 100%   { left: 0 }  
              25%, 45%        { left: -100% }  
              50%, 70%        { left: -200% }  
              75%, 95%        { left: -300% }  
          }
          /* complétez le sélecteur : */  
          #slideshow .slider {  
              /* ... avec la propriété animation */  
              animation: slider 32s infinite;  
          }
          #timeline {  
              position: absolute;  
              background: #999;  
              bottom: 15px;  
              left: 15px;  
              height: 1px;  
              background: rgb(214,98,13);  
              background: rgba(214,98,13,.8);  
              width: 0;  
              /* fonction d'animation */  
              animation: timeliner 32s infinite;  
          }
          @keyframes timeliner {  
              0%, 25%, 50%, 75%, 100% { width: 0;     }  
              20%, 45%, 70%, 90%      { width: 640px; }  
          }
          @keyframes figcaptionner {  
              0%, 25%, 50%, 75%, 100%                     { bottom: -55px;    }  
              5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%       { bottom: 5px;      }  
          }
          /* ajouter à l'élément : */  
          #slideshow figcaption {  
              /* ... la propriété animation */  
              animation: figcaptionner 32s infinite;  
          }
          .play_commands {  
              /* positionnement en haut à droite */  
              position: absolute;  
              top: 25px; right: 25px;  
              z-index: 10;  
              /* dimensionnement des icônes */  
              width: 22px;  
              height: 22px;  
              text-indent: -9999px;  
              border:0 none;  
              /* placez l'opacité à 1 si vous souhaitez voir les commandes */  
              opacity: 0;  
              /* préparation de transition sur opacicty et right */  
              transition: opacity 1s, right 1s;  
          }  
          /* on décale play légèrement sur la gauche */  
          .play { right: 55px; cursor: default; }  
             
          /* création de l'icône pause avec 2 pseudos éléments */  
          .pause:after,  
          .pause:before {  
              position: absolute;  
              display: block;  
              content: " ";  
              top:0;  
              width:38%;  
              height: 22px;  
              background: #fff;  
              background: rgba(255,255,255,0.5);  
          }  
          .pause:after { right:0; }  
          .pause:before { left:0; }  
             
          /* création de l'icône play avec des bordures */  
          .play {  
              width: 1px;  
              height: 1px;  
              /* les transparentes forment la flèche */  
              border-top: 10px solid transparent;  
              border-bottom: 10px solid transparent;  
              border-left: 20px solid #fff;  
              border-left: 20px solid rgba(255,255,255,0.5);  
              /* renseignez 1 pour voir l'icône de suite */  
              opacity: 0;  
          }  
             
          /* apparition du bouton pause au survole */  
          /* apparition des boutons au focus */  
          #slideshow:hover .pause,  
          .play_commands:focus {  
              opacity: 1;  
              outline: none;  
          }
          /* stopper les animation */  
          .sl_command:target ~ #slideshow .slider,  
          .sl_command:target ~ #slideshow figcaption,  
          .sl_command:target ~ #slideshow #timeline,  
          .sl_command:target ~ #slideshow .dots_commands li:first-child a:after {  
              animation-play-state: paused;  
          }  
             
          /* redémarrer les animations */  
          #sl_play:target ~ #slideshow .slider,  
          #sl_play:target ~ #slideshow figcaption,  
          #sl_play:target ~ #slideshow #timeline,  
          #sl_play:target ~ #slideshow .dots_commands li:first-child a:after {  
              animation-play-state: running;  
          }  
             
          /* switch entre les boutons */  
          .sl_command:target ~ #slideshow .pause      { opacity:0; }  
          #sl_play:target ~ #slideshow:hover .pause,  
          #sl_play:target ~ #slideshow .pause:focus   { opacity:1; }  
          .sl_command:target ~ #slideshow .play       { opacity:1; right: 25px; cursor: pointer; }  
          #sl_play:target ~ #slideshow .play          { opacity:0; right: 55px; cursor: default; }
          #slideshow .commands {  
              position: absolute;  
              top: 45%;  
              padding: 5px 13px;  
              border-bottom:0;  
              font-size: 1.3em;  
              color: #aaa;  
              text-decoration:none;  
              background-color: #eee;  
              background-image: linear-gradient(#fff,#ddd);  
              text-shadow: 0 0 1px #aaa;  
              border-radius: 50%;  
              box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
          }  
             
          #slideshow .prev { left: -48px; }  
          #slideshow .next { right: -48px; }  
             
          #slideshow .commands { display:none; }  
          #slideshow .commands1 { display: block; }
          #slideshow .c_slider {  
              position: absolute;  
              left:0; top:0;  
              width: 400%;  
              height: 310px;  
              /* multiple background */  
              background: url(img/dummy-640x310-1.jpg) 0 0 no-repeat,  
                          url(img/dummy-640x310-2.jpg) 640px 0 no-repeat,  
                          url(img/dummy-640x310-3.jpg) 1280px 0 no-repeat,  
                          url(img/dummy-640x310-4.jpg) 1920px 0 no-repeat;  
              transition: background 1s;  
          }
          /* on cache le slider */  
          .sl_i:target ~ #slideshow .slider                                   { visibility: hidden }  
          /* on planque la 1ère pastille (cf. bonux suivant) */  
          .sl_i:target ~ #slideshow .dots_commands li:first-child a:after     { display:none; }  
          /* pour afficher la 2ème pastille (cf. bonux suivant) */  
          .sl_i:target ~ #slideshow .dots_commands li:first-child a:before    { display:block; }  
             
          /* lorsque on cible le premier slider */  
          /* on cache tous les "précédent" et "suivant" */  
          #sl_i1:target ~ #slideshow .commands                                { display: none; }  
          /* on affiche seulement deux flèches */  
          #sl_i1:target ~ #slideshow .commands1                               { display: block; }  
          /* correspond au décalage des images */  
          #sl_i1:target ~ #slideshow .c_slider                                { background-position: 0 0, 640px 0, 1280px 0, 1920px 0; }  
          /* on place la pastille tout à gauche */  
          #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before   { left:0; }  
             
          /* même procédé lorsqu'on cible le second slide */  
          #sl_i2:target ~ #slideshow .commands                                { display: none; }  
          #sl_i2:target ~ #slideshow .commands2                               { display: block; }  
          #sl_i2:target ~ #slideshow .c_slider                                { background-position: -640px 0, 0 0, 640px 0, 1280px 0; }  
          #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before   { left:18px; }  
             
          /* puis le 3ème */  
          #sl_i3:target ~ #slideshow .commands                                { display: none; }  
          #sl_i3:target ~ #slideshow .commands3                               { display: block; }  
          #sl_i3:target ~ #slideshow .c_slider                                { background-position: -1280px 0, -640px 0, 0 0, 640px 0; }  
          #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before   { left:36px; }  
             
          /* et enfin le 4ème */  
          #sl_i4:target ~ #slideshow .commands                                { display: none; }  
          #sl_i4:target ~ #slideshow .commands4                               { display: block; }  
          #sl_i4:target ~ #slideshow .c_slider                                { background-position: -1920px 0, -1280px 0, -640px 0, 0 0; }  
          #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before   { left:54px; }
          .dots_commands  {  
              padding:0;  
              margin:32px 0 0;  
              text-align: center;  
          }  
          .dots_commands li {  
              display: inline;  
              padding:0; margin:0;  
          }  
          .dots_commands a {  
              position: relative;  
              display: inline-block;  
              height:8px; width: 8px;  
              margin: 0 5px;  
              text-indent: -9999px;  
              background: #fff;  
             
              border-radius: 50%;  
              box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;  
          }  
          /* quelques styles au focus */  
          .dots_commands a:focus {  
              outline: none;  
              background: orange;  
          }  
          .dots_commands li:first-child a { z-index: 25; }
          /* on style after et before, on utilisera les deux */  
          .dots_commands li:first-child a:after,  
          .dots_commands li:first-child a:before {  
              position: absolute;  
              top: 0; left: 0;  
              content: " ";  
              width: 8px; height: 8px;  
              background: #bd9b83;  
              z-index:20;  
              border-radius: 50%;  
              box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;  
          }  
          /* on anime "after" */  
          .dots_commands li:first-child a:after {  
              animation: dotser 32s infinite;  
          }  
          /* on cache "before", on l'utilise uniquement au clic (cf. bonux précédent) */  
          .dots_commands li:first-child a:before { display:none; }  
             
          /* c'est parti pour l'animation ! */  
          @keyframes dotser {  
              0%, 100%    { opacity: 1; left: 0;      }  
             
              20%         { opacity: 1; left: 0;      }  
              22%         { opacity: 0; left: 0;      }  
              23%         { opacity: 0; left: 18px;   }  
              25%         { opacity: 1; left: 18px;   }  
             
              45%         { opacity: 1; left: 18px;   }  
              47%         { opacity: 0; left: 18px;   }  
              48%         { opacity: 0; left: 36px;   }  
              50%         { opacity: 1; left: 36px;   }  
             
              70%         { opacity: 1; left: 36px;   }  
              72%         { opacity: 0; left: 36px;   }  
              73%         { opacity: 0; left: 54px;   }  
              75%         { opacity: 1; left: 54px;   }  
             
              95%         { opacity: 1; left: 54px;   }  
              97%         { opacity: 0; left: 54px;   }  
              98%         { opacity: 0; left: 0;  }  
          }
          </style>
          <span id="sl_play" class="sl_command"></span>  
          <span id="sl_pause" class="sl_command"></span>  
             
          <span id="sl_i1" class="sl_command sl_i"></span>  
          <span id="sl_i2" class="sl_command sl_i"></span>  
          <span id="sl_i3" class="sl_command sl_i"></span>  
          <span id="sl_i4" class="sl_command sl_i"></span>
          <section id="slideshow">
          <a class="play_commands pause" href="#sl_pause" title="Maintain paused">Pause</a>  
          <a class="play_commands play" href="#sl_play" title="Play the animation">Play</a>
          <a class="commands prev commands1" href="#sl_i4" title="Aller à la dernière slide">&lt;</a>  
          <a class="commands next commands1" href="#sl_i2" title="Aller à la 2ème slide">&gt;</a>  
          <a class="commands prev commands2" href="#sl_i1" title="Aller à la 1ère slide">&lt;</a>  
          <a class="commands next commands2" href="#sl_i3" title="Aller à la 3ème slide">&gt;</a>  
          <a class="commands prev commands3" href="#sl_i2" title="Aller à la 2ème slide">&lt;</a>  
          <a class="commands next commands3" href="#sl_i4" title="Aller à la 4ème slide">&gt;</a>  
          <a class="commands prev commands4" href="#sl_i3" title="Aller à la 3ème slide">&lt;</a>  
          <a class="commands next commands4" href="#sl_i1" title="Aller à la 1ère slide">&gt;</a>
              <div class="container">  
                  <div class="c_slider"></div>  
                  <div class="slider">  
                      <figure>  
                          <img src="http://img15.hostingpics.net/pics/927106dummy640x3101.jpg" alt="" width="640" height="310" />  
                          <figcaption>The mirror of soul</figcaption>  
                      </figure><!-- 
                      --><figure>  
                          <img src="http://img15.hostingpics.net/pics/971632dummy640x3102.jpg" alt="" width="640" height="310" />  
                          <figcaption>Let's cross that bridge when we come to it</figcaption>  
                      </figure><!-- 
                      --><figure>  
                          <img src="http://img15.hostingpics.net/pics/629657dummy640x3103.jpg" alt="" width="640" height="310" />  
                          <figcaption>Sushi<em>(do)</em> time</figcaption>  
                      </figure><!-- 
                      --><figure>  
                          <img src="http://img15.hostingpics.net/pics/667452dummy640x3104.jpg" alt="" width="640" height="310" />  
                          <figcaption>Waking Life</figcaption>  
                      </figure>  
                  </div>  
              </div>  
              <span id="timeline"></span> 
          	<ul class="dots_commands"><!-- 
              --><li><a title="Afficher la slide 1" href="#sl_i1">Slide 1</a></li><!-- 
              --><li><a title="Afficher la slide 2" href="#sl_i2">Slide 2</a></li><!-- 
              --><li><a title="Afficher la slide 3" href="#sl_i3">Slide 3</a></li><!-- 
              --><li><a title="Afficher la slide 4" href="#sl_i4">Slide 4</a></li>  
          </ul>
          </section>

          Ronamazona : Tes trois liens sont vraiment intéressants, en particulier le troisième. Mais je ne suis pas très doué avec les codes sources, je n'arrive pas à trouver le code ...

          Merci beaucoup pour votre aide

          • Partager sur Facebook
          • Partager sur Twitter
            26 janvier 2013 à 17:33:52

            En fait, je voudrais faire un slideshow simple dans ce style :

            http://www.cineshopping.fr/

            Merci pour vos aides :)

            • Partager sur Facebook
            • Partager sur Twitter
              20 juillet 2013 à 13:23:05

              Je pense que je réponds un peu tard à ta demande, mais au cas où, voici pour moi le plus simple des Slideshow:

              http://iprodev.com/iview/

              Il est vraiment beau, et existe en plusieurs version.

              • Partager sur Facebook
              • Partager sur Twitter
                20 juillet 2013 à 13:29:16

                En voici un dés plus basique en html/css , avec transition si le navigateur le permet : http://codepen.io/gcyrillus/pen/ksvaw
                • Partager sur Facebook
                • Partager sur Twitter
                | Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |
                  8 mars 2014 à 13:47:27

                  Bonjour lupin09

                  Ton code est vraimment :-------*****MAGIQUE,MAGNIFIQUE,SUPER*****-------

                  C'est jute que je veux poser une question :

                  j'ai afficher un titre à chaque une de mes images mais je veux faire un lien sur chaque titre comment faire

                  et aussi j'aimerai ajouter une image de plus au diaporama je voudrai 5 images et non pas 4

                  Et un GRAND MERCI pour toi

                  -
                  Edité par zzmoubarek 8 mars 2014 à 14:02:00

                  • Partager sur Facebook
                  • Partager sur Twitter
                    13 avril 2014 à 12:48:37

                    Comment changer la tailles des photos dans ton premier diaporama lupin 09 ?
                    • Partager sur Facebook
                    • Partager sur Twitter
                      13 avril 2014 à 15:33:40

                      il faut reprendre les dimensions de chacun des éléments qui compose le slideshow en fonction de la taille des images , en bref remetre a jour tout ce qui concerne les dimensions , voir les keyframe en cas d'ajout / suppression d'image.

                      Le code sur le fond fonctionne , ne toucher pas au html , sauf a ajouter/enlever une balise <figure> et les span, a li de commande :).

                      à l'arrache : slide au dimensions modifié http://codepen.io/anon/pen/CtdhL/

                      Sinon , s'adreeser a l'auteur de ce slideshow

                      -
                      Edité par gcyrillus 13 avril 2014 à 15:36:12

                      • Partager sur Facebook
                      • Partager sur Twitter
                      | Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |
                        23 avril 2014 à 13:57:53

                        Bonjour ranKER,

                        J'ai utilisé ton code qui fonctionne bien et j'aurais voulu savoir quelle manip faut-il pour identifier plusieurs diaporama sur la même page sans qu'ils s'interposent les uns les autres. Où faut-il les identifier dans le code?



                        -
                        Edité par UNPI 23 avril 2014 à 14:02:27

                        • Partager sur Facebook
                        • Partager sur Twitter
                          23 avril 2014 à 14:19:27

                          UNPI a écrit:

                          Bonjour ranKER,

                          J'ai utilisé ton code qui fonctionne bien et j'aurais voulu savoir quelle manip faut-il pour identifier plusieurs diaporama sur la même page sans qu'ils s'interposent les uns les autres. Où faut-il les identifier dans le code?



                          -
                          Edité par UNPI il y a 10 minutes


                          En passant, tu as bien remarqué que c’était un bon vieux morceau de javaScript qui te genere,  genre HTML 3  pas valide et poster en janvier 2013 ?

                          C'est quoi cette manie de déterrer ce topic ?

                          • Partager sur Facebook
                          • Partager sur Twitter
                          | Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |
                            23 avril 2014 à 14:39:58

                            Je l'ai pris pour sa facilité de mise en oeuvre. Après je suis pas assez caler pour comprendre sa compatibilité. Mais je ne cherche pas à faire plus compliqué en tout cas. Si tu as une suggestion du même type?

                            gcyrillus a écrit:

                            UNPI a écrit:

                            Bonjour ranKER,

                            J'ai utilisé ton code qui fonctionne bien et j'aurais voulu savoir quelle manip faut-il pour identifier plusieurs diaporama sur la même page sans qu'ils s'interposent les uns les autres. Où faut-il les identifier dans le code?



                            -
                            Edité par UNPI il y a 10 minutes


                            En passant, tu as bien remarqué que c’était un bon vieux morceau de javaScript qui te genere,  genre HTML 3  pas valide et poster en janvier 2013 ?

                            C'est quoi cette manie de déterrer ce topic ?



                            -
                            Edité par UNPI 23 avril 2014 à 14:40:18

                            • Partager sur Facebook
                            • Partager sur Twitter
                              23 avril 2014 à 14:45:31

                              UNPI a écrit:

                              Je l'ai pris pour sa facilité de mise en oeuvre. Après je suis pas assez caler pour comprendre sa compatibilité. Mais je ne cherche pas à faire plus compliqué en tout cas. Si tu as une suggestion du même type?


                              Ma suggestion est que tu t'ouvres un nouveau topic bien propre pour avoir des réponses en concordance avec TA question :) , au lieu de tout mélanger et noyer ici ;)

                              Rien que le titre de ce topic ne concorde  pas avec ton soucis de JavaScript.

                              Cdt,

                              ++

                              -
                              Edité par gcyrillus 23 avril 2014 à 14:47:55

                              • Partager sur Facebook
                              • Partager sur Twitter
                              | Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |
                                25 mai 2014 à 19:02:30

                                Merci C'est super le code que tu a donner Lupin :)

                                -
                                Edité par Hawk3ye 25 mai 2014 à 19:04:26

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  25 mai 2014 à 19:11:57

                                  Mais je n'arrive pas a faire fonctionner les boutons suivant et precedent :/
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    31 janvier 2015 à 22:07:14

                                    La meme chose pour moi, quand je l'ai testé seul il a  bien marcher, mais quand je l'ai associé sur mon site, il n'a  pas fonctionné (les boutons aussi les photos ne veulent plus s'afficher;

                                    -
                                    Edité par abedabed 31 janvier 2015 à 22:09:06

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      25 février 2016 à 18:59:00

                                      merci Lupin09 mais pour quelqu'un qui veut aller au delà des 4 images il fait comment??
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        19 avril 2016 à 21:18:02

                                        suivez ceci encore plus simple https://www.youtube.com/watch?v=ACs0Ksib3Pw&feature=youtu.be
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          26 avril 2019 à 0:34:13

                                          Bonjour,

                                          la on est dans un déterrage le plus total. C'est voyage au centre de la terre.

                                          On devrais fermer les vieux sujets

                                          • Partager sur Facebook
                                          • Partager sur Twitter

                                          Compos sui.

                                          Diaporama HTML/CSS

                                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                          • Editeur
                                          • Markdown