Problème avec une slideshow

Poster un nouveau sujet   Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.

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

Résolu Problème avec une slideshow

Message par Sparadra le Mar 1 Avr 2014 - 20:00

Bonjour à vous tous !

Je vous écris ce petit message car je suis totalement perdue. J'ai un modèle de slideshow qui est le suivant :

Code:
 /* SLIDESHOW */

@keyframes AutoSlide {
    0% {
        left: 0px;
    }
    10% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -260px;
    }
    35% {
        left: -260px; /*idem pour attente*/
    }
    50% {
        left: -520px;
    }
    60% {
        left: -520px; /*idem pour attente*/
    }
 75% {
        left: -780px; /*idem pour attente*/
    }
 95% {
        left: -780px; /*idem pour attente*/
    }
    100% {
        left: 0px;
    }
}

@-moz-keyframes AutoSlide {
    0% {
        left: 0px;
    }
    10% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -260px;
    }
    35% {
        left: -260px; /*idem pour attente*/
    }
    50% {
        left: -520px;
    }
    60% {
        left: -520px; /*idem pour attente*/
    }
 75% {
        left: -780px; /*idem pour attente*/
    }
 95% {
        left: -780px;
    }
    100% {
        left: 0px;
    }
}

@-webkit-keyframes AutoSlide {
    0% {
        left: 0px;
    }
    10% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -260px;
    }
    35% {
        left: -260px; /*idem pour attente*/
    }
    50% {
        left: -520px;
    }
    60% {
        left: -520px; /*idem pour attente*/
    }
 75% {
        left: -780px; /*idem pour attente*/
    }
 95% {
        left: -780px;
    }
    100% {
        left: 0px;
    }
}

@-o-keyframes AutoSlide {
    0% {
        left: 0px;
    }
    10% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -260px;
    }
    35% {
        left: -260px; /*idem pour attente*/
    }
    50% {
        left: -520px;
    }
    60% {
        left: -520px; /*idem pour attente*/
    }
 75% {
        left: -780px; /*idem pour attente*/
    }
 95% {
        left: -780px;
    }
    100% {
        left: 0px;
    }
}
@-khtml-keyframes AutoSlide {
    0% {
        left: 0px;
    }
    10% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -260px;
    }
    35% {
        left: -260px; /*idem pour attente*/
    }
    50% {
        left: -520px;
    }
    60% {
        left: -520px; /*idem pour attente*/
    }
 75% {
        left: -780px; /*idem pour attente*/
    }
 95% {
        left: -780px;
    }
    100% {
        left: 0px;
    }
}
#slideshow {
    position: relative;
    width: 260px;
    height: 260px;
    margin:  20px auto;
  border: 5px solid #ffffff;
    overflow: hidden;
border-style:solid;
border-width:5px;
-webkit-box-shadow: 0px 0px 3px #7a93a4;
-moz-box-shadow: 0px 0px 3px #7a93a4;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=15, Color='#656565', Positive='true');
zoom:1;
box-shadow: 0px 0px 3px #7a93a4;
}
#sContent li {
    display: inline;
}
#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    margin: 0;            
    padding: 0;
    
    /*CSS3 keyframes animation*/
    animation-name: AutoSlide;
 -webkit-animation-name: AutoSlide;
 -o-animation-name: AutoSlide;
 -khtml-animation-name: AutoSlide;
 -moz-animation-name: AutoSlide;
    animation-duration: 20s;
-webkit-animation-duration: 20s;
 -o-animation-duration: 20s;
 -khtml-animation-duration: 20s;
 -moz-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
 -o-animation-iteration-count: infinite;
 -khtml-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
-webkit-timing-function: ease-in-out;
 -o-timing-function: ease-in-out;
 -khtml-timing-function: ease-in-out;
 -moz-timing-function: ease-in-out;
}

Modèle que j'ai adaptée y intégrer mes deux images de 260x260px :

Code:
<div id="slideshow">
  <ul id="sContent"><!--      
         --><li><img src="http://img1.imagilive.com/0414/Event1.png" alt="Image bleue" /></li><!--    
             --><li><img src="http://img1.imagilive.com/0414/DesignV4.png" alt="Image verte" /></li><!--      
           --><li><img src="http://img1.imagilive.com/0414/Event1.png" alt="Image brune" /></li><!--      
             --><li><img src="http://img1.imagilive.com/0414/DesignV4.png" alt="Image brune" /></li>
  </ul>
</div>

Hors voici le résultat que j'obtiens : http://hikaru-graph-test.forumgratuit.org/t6-header-new#8

Une âme charitable pourrait-elle m'éclairer sur la nature du problème ? ;w;

En vous remerciant par avance pour votre aide !


Dernière édition par Sparadra le Mar 1 Avr 2014 - 20:25, édité 1 fois
avatar

Sparadra
*

Féminin
Messages : 41
Inscrit(e) le : 24/02/2012

http://gates-of-etro.actifforum.com/
Sparadra a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème avec une slideshow

Message par Neptunia le Mar 1 Avr 2014 - 20:20

Bonjour ^^


Je ne comprends pas grand chose à votre code mais si j'ai bien compris vous avez 4 images de 260 pixels et votre CSS comporte

#sContent {
position: absolute;
top: 0;
left: 0;
width: 800px;
margin: 0;
padding: 0;
...

Si vous modifiez la largeur (1040 px par exemple) je pense que votre problème sera résolu.
avatar

Neptunia
Membre actif

Féminin
Messages : 11790
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec une slideshow

Message par Sparadra le Mar 1 Avr 2014 - 20:24

Hu, c'était ça. Un grand merci pour ton aide AoF-Neptune ! **

C'était tout bête ;_;
avatar

Sparadra
*

Féminin
Messages : 41
Inscrit(e) le : 24/02/2012

http://gates-of-etro.actifforum.com/
Sparadra a été remercié(e) par l'auteur de ce sujet.

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


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