AccueilDernières imagesRechercherS'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.

-50%
Le deal à ne pas rater :
-50% Baskets Nike Air Huarache
64.99 € 129.99 €
Voir le deal

    Slideshow au défilement automatique et contrôlable

    Heine
    Heine
    MasculinAge : 29Messages : 169

    Sam 26 Mai 2018 - 3: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 2018 - 16:44, édité 1 fois



    Slideshow au défilement automatique et contrôlable  110407104459204818
    Heine
    Heine
    MasculinAge : 29Messages : 169

    Mar 29 Mai 2018 - 0:27

    Up !



    Slideshow au défilement automatique et contrôlable  110407104459204818
    Heine
    Heine
    MasculinAge : 29Messages : 169

    Jeu 31 Mai 2018 - 2:26

    Re-up ;w;



    Slideshow au défilement automatique et contrôlable  110407104459204818
    Heine
    Heine
    MasculinAge : 29Messages : 169

    Sam 2 Juin 2018 - 3:56

    Uwp \o/



    Slideshow au défilement automatique et contrôlable  110407104459204818
    Heine
    Heine
    MasculinAge : 29Messages : 169

    Lun 4 Juin 2018 - 3:13

    Up up ! ~



    Slideshow au défilement automatique et contrôlable  110407104459204818
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 5 Juin 2018 - 15:14

    Hellow ~

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



    Heine
    Heine
    MasculinAge : 29Messages : 169

    Mar 5 Juin 2018 - 17:30

    Oui, c'est parfait ! **



    Slideshow au défilement automatique et contrôlable  110407104459204818
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 5 Juin 2018 - 18: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>



    Heine
    Heine
    MasculinAge : 29Messages : 169

    Mer 6 Juin 2018 - 0: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



    Slideshow au défilement automatique et contrôlable  110407104459204818
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 6 Juin 2018 - 0: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



    Heine
    Heine
    MasculinAge : 29Messages : 169

    Mer 6 Juin 2018 - 1: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" ?



    Slideshow au défilement automatique et contrôlable  110407104459204818
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 6 Juin 2018 - 15: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>



    Heine
    Heine
    MasculinAge : 29Messages : 169

    Mer 6 Juin 2018 - 16:44

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



    Slideshow au défilement automatique et contrôlable  110407104459204818
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 12:11