images défilantes qui ne se défilent pas

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu images défilantes qui ne se défilent pas

Message par Lilynufare Dim 12 Nov 2017 - 22:47

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 Smile
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.


Dernière édition par Lilynufare le Lun 13 Nov 2017 - 0:39, édité 1 fois
Lilynufare

Lilynufare
****

Messages : 225
Inscrit(e) le : 22/08/2012

Voir le profil de l'utilisateur
Lilynufare a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images défilantes qui ne se défilent pas

Message par Adam_sfp Dim 12 Nov 2017 - 23:43

Bonsoir

Avec un peu de Jquery Wink
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.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

Voir le profil de l'utilisateur http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images défilantes qui ne se défilent pas

Message par Lilynufare Lun 13 Nov 2017 - 0:39

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

Lilynufare
****

Messages : 225
Inscrit(e) le : 22/08/2012

Voir le profil de l'utilisateur
Lilynufare a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum