images défilantes qui ne se défilent pas

[Lilynufare]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Opera
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 10/11/17
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir
Je viens pour demander de l'aide concernant un code. J'ai installé un code pour avoir des images défilantes sous la barre de navigation. Il y en a six en tout mais juste quatre qui défilent. Je n'arrive pas à comprendre pourquoi les deux dernières défilent pas.

code installé dans le template overall_header:

Code:

<div class="slider">
          <a href="#" target="_blank"><img src="https://images2.imgbox.com/c3/b5/5sEZLaOi_o.png" alt="" style="width: 360px; " /></a><a href="#" target="_blank"><img src="https://images2.imgbox.com/7b/04/eJRQttbP_o.png" alt="" style="width: 360px;" /></a><a href="http://haremofcorruption.various-forum.com/#51100" target="_blank"><img src="https://images2.imgbox.com/43/b1/n7zw6mD3_o.png" alt="" style="width: 360px;" /></a><a href="http://haremofcorruption.various-forum.com/#51100" target="_blank"><img src="https://images2.imgbox.com/a1/fe/UWX6DTYx_o.png" alt="" style="width: 360px;" /></a> <a href="http://haremofcorruption.various-forum.com/#51100" target="_blank"><img src="https://images2.imgbox.com/a7/da/0wtj3US2_o.png" alt="" style="width: 360px;" /></a><a href="http://haremofcorruption.various-forum.com/#51100" target="_blank"><img src="https://images2.imgbox.com/d0/3b/Bx5v13PI_o.png" alt="" style="width: 360px;" /></a>
      </div>

css :

Code:


/* slideshow */
    #slideshow {
      position:relative;
      width:360px;
      height:145px;
    left:403px;
  top:77px;
    }

    /* gestion des dimensions et débordement du conteneur */
    #slideshow .container {
      position:relative;
      width:360px;
      height:145px;
      overflow:hidden
    }

    /* le conteneur des slides */
    #slideshow .slider {
      position:absolute;
      left:0;
      top:0;
      width:400%;
      height:145px;
      animation:slider 16s infinite;
      -webkit-animation:slider 16s infinite;
    }

    /* Fonction animation */
    @keyframes slider {
      0%,20%,100% {left:0}
      25%,45% {left:-100%}
      50%,70% {left:-200%}
  75%,95% {left:-300%}
      100%,120% { left:-400%}
    100%,145% { left:-500%}

    }
    @-webkit-keyframes slider {
      0%,20%,100% {left:0}
      25%,45% {left:-100%}
      50%,70% {left:-200%}
    75%,95% {left:-300%}
      100%,120% { left:-400%}
    125%,145% { left:-500%}
   
    }

Merci de votre attention.

[Adam_sfp]

Bonsoir

Avec un peu de Jquery
HTML

Code:

<div class="slideshow">
   <ul>
      <li><a target="_blank" href="http://forum.forumactif.com/t394281-images-defilantes-qui-ne-se-defilent-pas"><img src="https://images2.imgbox.com/c3/b5/5sEZLaOi_o.png" alt="" width="360" height="145" /></li>
      <li><img src="https://images2.imgbox.com/7b/04/eJRQttbP_o.png" alt="" width="360" height="145" /></li>
      <li><img src="https://images2.imgbox.com/43/b1/n7zw6mD3_o.png" alt="" width="360" height="145" /></li>
      <li><img src="https://images2.imgbox.com/a1/fe/UWX6DTYx_o.png" alt="" width="360" height="145" /></li>
    <li><img src="https://images2.imgbox.com/a7/da/0wtj3US2_o.png" alt="" width="360" height="145" /></li>
    <li><img src="https://images2.imgbox.com/d0/3b/Bx5v13PI_o.png" alt="" width="360" height="145" /></li>
   </ul>
</div>

Css

Code:

.slideshow { 
      width: 360px; 
      height: 145px; 
      margin: 3em auto;
      overflow: hidden;
      border: 3px solid black;
    } 
    .slideshow ul { 
      width: 400%; 
      height: 145px;
      padding:0; margin:0;
      list-style:none;
    } 
    .slideshow li { float: left; }


Jquery

Code:

jQuery(function(){
         setInterval(function(){
            jQuery(".slideshow ul").animate({marginLeft:-360},800,function(){
               jQuery(this).css({marginLeft:0}).find("li:last").after(jQuery(this).find("li:first"));
            })
         }, 3500);
      });

*Changez la valeur 800 pour le temps de transition et 3500 le temps de pause.

Cdt.

[Lilynufare]

Ahhh oui, je comprend mieux maintenant. C'est top, merci beaucoup
résolu