AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Slideshow au défilement automatique et contrôlable

    Partagez
    avatar
    Heine
    MasculinAge : 23Messages : 168

    le Ven 25 Mai - 14:15

    Ma demande



    Bonjour à vous tous o/

    Voilà, pour mon forum, j'aimerai installer des slideshow pour faciliter l'apparition des news et du staff. Concrètement, l'idée est extrêmement simple. Plusieurs images, sur lesquelles on peut cliquer pour accéder à une autre page. Dans l'idée, j'aimerai un slideshow automatique & contrôlable : on peut accéder à n'importe quelle "partie" via des petits points plus bas, mais le slideshow défile aussi tout seul si on ne fait rien.

    Merci beaucoup d'avance !


    Schéma(s) et Eléments


    Schémas : voilà l'exemple venant du template que j'ai graph sur toshop.
    Tailles des éléments :
    » Taille de l'image : 222 x 79
    » Espace entre l'image et les petits ronds : 5 pixels
    Effets voulus : Un effet de transition basique de droite à gauche est suffisant ! Et du coup, que ça soit aussi automatique.
    Version de votre forum : PHPBB2


    Ressources


    Nada !


    Autres précisions ?


    Encore merci à ceux qui prendront en compte ma demande ! J'vous aime, des coeurs et des chocolats sur vous.



    Dernière édition par Heine le Mer 6 Juin - 3:44, édité 1 fois



    avatar
    Heine
    MasculinAge : 23Messages : 168

    le Lun 28 Mai - 11:27

    Up !



    avatar
    Heine
    MasculinAge : 23Messages : 168

    le Mer 30 Mai - 13:26

    Re-up ;w;



    avatar
    Heine
    MasculinAge : 23Messages : 168

    le Ven 1 Juin - 14:56

    Uwp \o/



    avatar
    Heine
    MasculinAge : 23Messages : 168

    le Dim 3 Juin - 14:13

    Up up ! ~



    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Mar 5 Juin - 2:14

    Hellow ~

    Comme ça c'est bon?
    http://forum-test-onyx4.forum-canada.com/h5-slideshow



    avatar
    Heine
    MasculinAge : 23Messages : 168

    le Mar 5 Juin - 4:30

    Oui, c'est parfait ! **



    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Mar 5 Juin - 5:44

    Salut!

    Voilà le code à mettre sur une page HTML (utilise toujours le triple engrenage pour créer/modifier la page) :
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="author" content="Onyx" />
      <title>Slideshow</title>
      <style type="text/css">
        /*Corps*/
        body {
        margin: 0px;
        }
       
        /* Bloc du Slideshow */
        #slideshow {
        position: relative;
        width: 222px;
        height: 79px;
        padding: 0px;
        margin: 0px auto;
        border: 1px solid #3e4654;
        }
       
        /* Cache ce qui dépasse */
        #slideshow .container {
        position:relative;
        width: 222px;
        height: 79px;
        overflow: hidden;
        }
       
        /* Slideshow controllable */
        #slideshow .c_slider {
        position: absolute;
        left:0; top:0;
        width: 400%;
        height: 79px;
        -webkit-transition: 1s;
        transition: 1s;
        }
       
        /* Slideshow automatique */
        #slideshow .slider {
        position: absolute;
        left:0; top:0;
        width: 400%;
        height: 79px;
        -webkit-animation: slider 32s infinite;
        -moz-animation: slider 32s infinite;
        animation: slider 32s infinite;
        }
        /* Annule les marges sous les figures */
        #slideshow figure {
        position:relative;
        display:inline-block;
        padding:0; margin:0;
        }
        /* Hauteur et largeur des images */
        #slideshow figure img {
        width: 222px;
        height: 79px;
        }
       
        /* Animation des slides */
        @-webkit-keyframes slider {
        0%, 20%, 100%  {left: 0;}
        25%, 45% {left: -100%;}
        50%, 70% {left: -200%;}
        75%, 95% {left: -300%;}
        }
        @-moz-keyframes slider {
        0%, 20%, 100%  {left: 0;}
        25%, 45% {left: -100%;}
        50%, 70% {left: -200%;}
        75%, 95% {left: -300%;}
        }
        @keyframes slider {
        0%, 20%, 100%  {left: 0;}
        25%, 45% {left: -100%;}
        50%, 70% {left: -200%;}
        75%, 95% {left: -300%;}
        }
       
        /* Stopper les animations quand on utilise les pastilles */
        .sl_command:target ~ #slideshow .slider,
        .sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
        animation-play-state: paused;
        }
       
        /* Faire fonctionner la partie controllable du slideshow */
        /* On cache le slider automatique */
        .sl_i:target ~ #slideshow .slider {
        visibility: hidden;
        }
        /* On planque la 1ère pastille */
        .sl_i:target ~ #slideshow .dots_commands li:first-child a:after {
        display: none;
        }
        /* On affiche la 2ème pastille */
        .sl_i:target ~ #slideshow .dots_commands li:first-child a:before {
        display: block;
        }
        /* On bouge les images */
        #sl_i1:target ~ #slideshow .c_slider {
        left: 0;
        }
        /* On place la pastille tout à gauche */
        #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before {
        left: 0;
        }
        /* Pareil pour 2e pastille */
        #sl_i2:target ~ #slideshow .c_slider {
        left: -222px;
        }
        #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before {
        left: 18px;
        }
        /* Pareil pour 3e pastille */
        #sl_i3:target ~ #slideshow .c_slider {
        left: -444px;
        }
        #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before {
        left: 36px;
        }
        /* Pareil pour 4e pastille */
        #sl_i4:target ~ #slideshow .c_slider {
        left: -666px;
        }
        #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before {
        left: 54px;
        }
       
        /* Les pastilles en bas */
        .dots_commands {
        padding:0;
        margin: 5px 0 0 0;
        text-align: center;
        }
        .dots_commands li {
        display: inline;
        padding:0; margin:0;
        }
        /* Pastille normale */
        .dots_commands a {
        position: relative;
        display: inline-block;
        height:8px;
        width: 8px;
        margin: 0 5px;
        text-indent: -9999px;
        background: #b8bec9;
        border-radius: 50%;
        }
        /* quelques styles au focus */
        .dots_commands a:focus {
        outline: none;
        background: #000000;
        }
        .dots_commands li:first-child a {
        z-index: 25;
        }
       
        /* Pastille qui est active */
        .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: #273040;
        z-index:20;
        border-radius: 50%;
        }
       
        /* Faire bouger les pastilles */
        /* on anime "after" */
        .dots_commands li:first-child a:after {
        -webkit-animation: dotser 32s infinite;
        -moz-animation: dotser 32s infinite;
        animation: dotser 32s infinite;
        }
        /* on cache "before", on l'utilise uniquement au clic */
        .dots_commands li:first-child a:before {
        display:none;
        }
       
        /* c'est parti pour l'animation des Pastilles */
        @-webkit-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;}
        }
        @-moz-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;}
        }
        @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>
    </head>
    <body>
      <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">
        <div class="container">
         
          <!-- Slider controllable -->
          <div class="c_slider"><!--
           
              1ERE IMAGE ET 1ER LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.pharmacie-bouvier.fr/sites/default/files/pharmacie-bouvier.gif" alt="Image 1" />
            </a></figure><!--
           
              2E IMAGE ET 2E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-Layaway.jpg" alt="Image 2" />
            </a></figure><!--
           
              3E IMAGE ET 3E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.corocarillon.com/images/Top06.gif" alt="Image 3" />
            </a></figure><!--
           
              4E IMAGE ET 4E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-questions.jpg" alt="Image 4" />
            </a></figure>
           
          </div>
         
          <!-- Slider automatique -->
          <div class="slider"><!--
           
              1ERE IMAGE ET 1ER LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.pharmacie-bouvier.fr/sites/default/files/pharmacie-bouvier.gif" alt="Image 1" />
            </a></figure><!--
           
              2E IMAGE ET 2E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-Layaway.jpg" alt="Image 2" />
            </a></figure><!--
           
              3E IMAGE ET 3E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.corocarillon.com/images/Top06.gif" alt="Image 3" />
            </a></figure><!--
           
              4E IMAGE ET 4E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-questions.jpg" alt="Image 4" />
            </a></figure>
           
          </div>
        </div>
        <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>
    </body>
    </html>

    Les images et liens sont à mettre tout en bas. Tu verras que tu dois les mettre 2 fois, une fois pour la partie automatisée et l'autre fois pour la partie controllable.

    Ensuite, tu mets l'iframe avec le lien de la page html où tu veux sur ton forum :
    Code:
    <iframe src="URL PAGE HTML" style="display: block; margin: auto; border: none; width: 224px; height: 104px;"></iframe>



    avatar
    Heine
    MasculinAge : 23Messages : 168

    le Mar 5 Juin - 11:38

    Cool ! \o/

    Testé sur la P.A. du coup et ça marche.. Sauf qu'il y a un petit problème ! Quand on clique sur un des boutons pour directement passer à l'une des diapo', bah ça ouvre la page HTML dans une autre fenêtre ! x:x



    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Mar 5 Juin - 11:56

    Salut!

    Essaies ceci pour la page html :
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="author" content="Onyx" />
      <title>Slideshow</title>
      <style type="text/css">
        /*Corps*/
        body {
        margin: 0px;
        }
       
        /* Bloc du Slideshow */
        #slideshow {
        position: relative;
        width: 222px;
        height: 79px;
        padding: 0px;
        margin: 0px auto;
        border: 1px solid #3e4654;
        }
       
        /* Cache ce qui dépasse */
        #slideshow .container {
        position:relative;
        width: 222px;
        height: 79px;
        overflow: hidden;
        }
       
        /* Slideshow controllable */
        #slideshow .c_slider {
        position: absolute;
        left:0; top:0;
        width: 400%;
        height: 79px;
        -webkit-transition: 1s;
        transition: 1s;
        }
       
        /* Slideshow automatique */
        #slideshow .slider {
        position: absolute;
        left:0; top:0;
        width: 400%;
        height: 79px;
        -webkit-animation: slider 32s infinite;
        -moz-animation: slider 32s infinite;
        animation: slider 32s infinite;
        }
        /* Annule les marges sous les figures */
        #slideshow figure {
        position:relative;
        display:inline-block;
        padding:0; margin:0;
        }
        /* Hauteur et largeur des images */
        #slideshow figure img {
        width: 222px;
        height: 79px;
        }
       
        /* Animation des slides */
        @-webkit-keyframes slider {
        0%, 20%, 100%  {left: 0;}
        25%, 45% {left: -100%;}
        50%, 70% {left: -200%;}
        75%, 95% {left: -300%;}
        }
        @-moz-keyframes slider {
        0%, 20%, 100%  {left: 0;}
        25%, 45% {left: -100%;}
        50%, 70% {left: -200%;}
        75%, 95% {left: -300%;}
        }
        @keyframes slider {
        0%, 20%, 100%  {left: 0;}
        25%, 45% {left: -100%;}
        50%, 70% {left: -200%;}
        75%, 95% {left: -300%;}
        }
       
        /* Stopper les animations quand on utilise les pastilles */
        .sl_command:target ~ #slideshow .slider,
        .sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
        animation-play-state: paused;
        }
       
        /* Faire fonctionner la partie controllable du slideshow */
        /* On cache le slider automatique */
        .sl_i:target ~ #slideshow .slider {
        visibility: hidden;
        }
        /* On planque la 1ère pastille */
        .sl_i:target ~ #slideshow .dots_commands li:first-child a:after {
        display: none;
        }
        /* On affiche la 2ème pastille */
        .sl_i:target ~ #slideshow .dots_commands li:first-child a:before {
        display: block;
        }
        /* On bouge les images */
        #sl_i1:target ~ #slideshow .c_slider {
        left: 0;
        }
        /* On place la pastille tout à gauche */
        #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before {
        left: 0;
        }
        /* Pareil pour 2e pastille */
        #sl_i2:target ~ #slideshow .c_slider {
        left: -222px;
        }
        #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before {
        left: 18px;
        }
        /* Pareil pour 3e pastille */
        #sl_i3:target ~ #slideshow .c_slider {
        left: -444px;
        }
        #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before {
        left: 36px;
        }
        /* Pareil pour 4e pastille */
        #sl_i4:target ~ #slideshow .c_slider {
        left: -666px;
        }
        #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before {
        left: 54px;
        }
       
        /* Les pastilles en bas */
        .dots_commands {
        padding:0;
        margin: 5px 0 0 0;
        text-align: center;
        }
        .dots_commands li {
        display: inline;
        padding:0; margin:0;
        }
        /* Pastille normale */
        .dots_commands a {
        position: relative;
        display: inline-block;
        height:8px;
        width: 8px;
        margin: 0 5px;
        text-indent: -9999px;
        background: #b8bec9;
        border-radius: 50%;
        }
        /* quelques styles au focus */
        .dots_commands a:focus {
        outline: none;
        background: #000000;
        }
        .dots_commands li:first-child a {
        z-index: 25;
        }
       
        /* Pastille qui est active */
        .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: #273040;
        z-index:20;
        border-radius: 50%;
        }
       
        /* Faire bouger les pastilles */
        /* on anime "after" */
        .dots_commands li:first-child a:after {
        -webkit-animation: dotser 32s infinite;
        -moz-animation: dotser 32s infinite;
        animation: dotser 32s infinite;
        }
        /* on cache "before", on l'utilise uniquement au clic */
        .dots_commands li:first-child a:before {
        display:none;
        }
       
        /* c'est parti pour l'animation des Pastilles */
        @-webkit-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;}
        }
        @-moz-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;}
        }
        @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>
    </head>
    <body>
      <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">
        <div class="container">
         
          <!-- Slider controllable -->
          <div class="c_slider"><!--
           
              1ERE IMAGE ET 1ER LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.pharmacie-bouvier.fr/sites/default/files/pharmacie-bouvier.gif" alt="Image 1" />
            </a></figure><!--
           
              2E IMAGE ET 2E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-Layaway.jpg" alt="Image 2" />
            </a></figure><!--
           
              3E IMAGE ET 3E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.corocarillon.com/images/Top06.gif" alt="Image 3" />
            </a></figure><!--
           
              4E IMAGE ET 4E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-questions.jpg" alt="Image 4" />
            </a></figure>
           
          </div>
         
          <!-- Slider automatique -->
          <div class="slider"><!--
           
              1ERE IMAGE ET 1ER LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.pharmacie-bouvier.fr/sites/default/files/pharmacie-bouvier.gif" alt="Image 1" />
            </a></figure><!--
           
              2E IMAGE ET 2E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-Layaway.jpg" alt="Image 2" />
            </a></figure><!--
           
              3E IMAGE ET 3E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.corocarillon.com/images/Top06.gif" alt="Image 3" />
            </a></figure><!--
           
              4E IMAGE ET 4E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-questions.jpg" alt="Image 4" />
            </a></figure>
           
          </div>
        </div>
        <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>
    </body>
    </html>

    Si ça ne marche pas, files-moi lien du forum où tu l'as mis que je puisse voir Wink



    avatar
    Heine
    MasculinAge : 23Messages : 168

    le Mar 5 Juin - 12:21

    Ça fonctionne ! ~

    ... Mais nouveau petit problème... xDDD

    Comme tu peux le voir ici, tout est en place tout ça. Mais quand on clique sur le petit rond pour switch, bah... toute la page est abaissée et la diapo' est ainsi placée tout en haut. C'est assez brusque et surprenant, moyen que la page "reste en place" ?



    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Mer 6 Juin - 2:36

    Mmhh...

    Ok, on essaies ceci :
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="author" content="Onyx" />
      <title>Slideshow</title>
      <style type="text/css">
        /*Corps*/
        body {
        margin: 0px;
        }
       
        /* Bloc du Slideshow */
        #slideshow {
        position: relative;
        width: 222px;
        height: 79px;
        padding: 0px;
        margin: 0px auto;
        border: 1px solid #3e4654;
        }
       
        /* Cache ce qui dépasse */
        #slideshow .container {
        position:relative;
        width: 222px;
        height: 79px;
        overflow: hidden;
        }
       
        /* Slideshow controllable */
        #slideshow .c_slider {
        position: absolute;
        left:0; top:0;
        width: 400%;
        height: 79px;
        -webkit-transition: 1s;
        transition: 1s;
        }
       
        /* Slideshow automatique */
        #slideshow .slider {
        position: absolute;
        left:0; top:0;
        width: 400%;
        height: 79px;
        -webkit-animation: slider 32s infinite;
        -moz-animation: slider 32s infinite;
        animation: slider 32s infinite;
        }
        /* Annule les marges sous les figures */
        #slideshow figure {
        position:relative;
        display:inline-block;
        padding:0; margin:0;
        }
        /* Hauteur et largeur des images */
        #slideshow figure img {
        width: 222px;
        height: 79px;
        }
       
        /* Animation des slides */
        @-webkit-keyframes slider {
        0%, 20%, 100%  {left: 0;}
        25%, 45% {left: -100%;}
        50%, 70% {left: -200%;}
        75%, 95% {left: -300%;}
        }
        @-moz-keyframes slider {
        0%, 20%, 100%  {left: 0;}
        25%, 45% {left: -100%;}
        50%, 70% {left: -200%;}
        75%, 95% {left: -300%;}
        }
        @keyframes slider {
        0%, 20%, 100%  {left: 0;}
        25%, 45% {left: -100%;}
        50%, 70% {left: -200%;}
        75%, 95% {left: -300%;}
        }
       
        /* Stopper les animations quand on utilise les pastilles */
        .sl_command:checked ~ #slideshow .slider,
        .sl_command:checked ~ #slideshow .dots_commands li:first-child label:after {
        animation-play-state: paused;
        }
       
        /* Faire fonctionner la partie controllable du slideshow */
        /* On cache le slider automatique */
        .sl_i:checked ~ #slideshow .slider {
        visibility: hidden;
        }
        /* On planque la 1ère pastille */
        .sl_i:checked ~ #slideshow .dots_commands li:first-child label:after {
        display: none;
        }
        /* On affiche la 2ème pastille */
        .sl_i:checked ~ #slideshow .dots_commands li:first-child label:before {
        display: block;
        }
        /* On bouge les images */
        #sl_i1:checked ~ #slideshow .c_slider {
        left: 0;
        }
        /* On place la pastille tout à gauche */
        #sl_i1:checked ~ #slideshow .dots_commands li:first-child label:before {
        left: 0;
        }
        /* Pareil pour 2e pastille */
        #sl_i2:checked ~ #slideshow .c_slider {
        left: -222px;
        }
        #sl_i2:checked ~ #slideshow .dots_commands li:first-child label:before {
        left: 18px;
        }
        /* Pareil pour 3e pastille */
        #sl_i3:checked ~ #slideshow .c_slider {
        left: -444px;
        }
        #sl_i3:checked ~ #slideshow .dots_commands li:first-child label:before {
        left: 36px;
        }
        /* Pareil pour 4e pastille */
        #sl_i4:checked ~ #slideshow .c_slider {
        left: -666px;
        }
        #sl_i4:checked ~ #slideshow .dots_commands li:first-child label:before {
        left: 54px;
        }
       
        /* Les pastilles en bas */
        .dots_commands {
        padding:0;
        margin: 5px 0 0 0;
        text-align: center;
        }
        .dots_commands li {
        display: inline;
        padding:0; margin:0;
        }
        /* Pastille normale */
        .dots_commands label {
        position: relative;
        display: inline-block;
        height:8px;
        width: 8px;
        margin: 0 5px;
        text-indent: -9999px;
        background: #b8bec9;
        border-radius: 50%;
        cursor: pointer;
        }
        /* quelques styles au focus */
        .dots_commands label:focus {
        outline: none;
        background: #000000;
        }
        .dots_commands li:first-child label {
        z-index: 25;
        }
       
        /* Pastille qui est active */
        .dots_commands li:first-child label:after,
        .dots_commands li:first-child label:before {
        position: absolute;
        top: 0; left: 0;
        content: " ";
        width: 8px; height: 8px;
        background: #273040;
        z-index:20;
        border-radius: 50%;
        }
       
        /* Faire bouger les pastilles */
        /* on anime "after" */
        .dots_commands li:first-child label:after {
        -webkit-animation: dotser 32s infinite;
        -moz-animation: dotser 32s infinite;
        animation: dotser 32s infinite;
        }
        /* on cache "before", on l'utilise uniquement au clic */
        .dots_commands li:first-child label:before {
        display:none;
        }
       
        /* c'est parti pour l'animation des Pastilles */
        @-webkit-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;}
        }
        @-moz-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;}
        }
        @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;}
        }
       
        input {
        display: none;
        }
      </style>
    </head>
    <body>
      <input type="radio" name="sl" id="sl_i1" class="sl_command sl_i" />
      <input type="radio" name="sl" id="sl_i2" class="sl_command sl_i" />
      <input type="radio" name="sl" id="sl_i3" class="sl_command sl_i" />
      <input type="radio" name="sl" id="sl_i4" class="sl_command sl_i" />
     
      <section id="slideshow">
        <div class="container">
         
          <!-- Slider controllable -->
          <div class="c_slider"><!--
           
              1ERE IMAGE ET 1ER LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.pharmacie-bouvier.fr/sites/default/files/pharmacie-bouvier.gif" alt="Image 1" />
            </a></figure><!--
           
              2E IMAGE ET 2E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-Layaway.jpg" alt="Image 2" />
            </a></figure><!--
           
              3E IMAGE ET 3E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.corocarillon.com/images/Top06.gif" alt="Image 3" />
            </a></figure><!--
           
              4E IMAGE ET 4E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-questions.jpg" alt="Image 4" />
            </a></figure>
           
          </div>
         
          <!-- Slider automatique -->
          <div class="slider"><!--
           
              1ERE IMAGE ET 1ER LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.pharmacie-bouvier.fr/sites/default/files/pharmacie-bouvier.gif" alt="Image 1" />
            </a></figure><!--
           
              2E IMAGE ET 2E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-Layaway.jpg" alt="Image 2" />
            </a></figure><!--
           
              3E IMAGE ET 3E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.corocarillon.com/images/Top06.gif" alt="Image 3" />
            </a></figure><!--
           
              4E IMAGE ET 4E LIEN --><figure>
            <a href="#" target="_blank">
              <img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-questions.jpg" alt="Image 4" />
            </a></figure>
           
          </div>
        </div>
        <ul class="dots_commands"><!--
          --><li><label title="Afficher la slide 1" for="sl_i1">Slide 1</label></li><!--
          --><li><label title="Afficher la slide 2" for="sl_i2">Slide 2</label></li><!--
          --><li><label title="Afficher la slide 3" for="sl_i3">Slide 3</label></li><!--
          --><li><label title="Afficher la slide 4" for="sl_i4">Slide 4</label></li>
        </ul>
      </section>
    </body>
    </html>



    avatar
    Heine
    MasculinAge : 23Messages : 168

    le Mer 6 Juin - 3:44

    Magnifique ! Un énorme merci, vraiment, merci énormément pour ça ! Ça fonctionne parfaitement !



    Contenu sponsorisé


      La date/heure actuelle est Dim 24 Juin - 4:07