Slider avec 4 images
amn
-
Nemoh-Khalifa Messages postés 76 Date d'inscription Statut Membre Dernière intervention -
Nemoh-Khalifa Messages postés 76 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un slider avec 4 images, mais je n'arrive pas à en ajouter plus... et j'avoue ne pas trop comprendre ce qui pose soucis voici mon code html et css :
Donc ici pour les images 6 à 9 c'est ok, par contre 10 et 11 rien du tout.
ET le css :
J'ai un slider avec 4 images, mais je n'arrive pas à en ajouter plus... et j'avoue ne pas trop comprendre ce qui pose soucis voici mon code html et css :
-<html>
<head>
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<section id="slideshow">
<div class="container">
<div class="c_slider"></div>
<div class="slider">
<a href="#"><figure>
<img src="images/6.jpg" alt="" width="640" height="310" />
<figcaption>Tips to travel around the world !</figcaption>
</figure></a><!--
--><a href="#"><figure>
<img src="images/7.jpg" alt="" width="640" height="310" />
<figcaption>Tips to travel around the world !</figcaption>
</figure></a><!--
--><a href="#"><figure>
<img src="images/8.jpg" alt="" width="640" height="310" />
<figcaption>Tips to travel around the world !</figcaption>
</figure></a><!--
--><a href="#"><figure>
<img src="images/9.jpg" alt="" width="640" height="310" />
<figcaption>Tips to travel around the world !</figcaption>
</figure></a><!--
--><a href="#"><figure>
<img src="images/10.jpg" alt="" width="640" height="310" />
<figcaption>Tips to travel around the world !</figcaption>
</figure></a><!--
--><a href="#"><figure>
<img src="images/11.jpg" alt="" width="640" height="310" />
<figcaption>Tips to travel around the world !</figcaption>
</figure></a>
</div>
</div>
<span id="timeline"></span>
</section>
</body>
</html>
Donc ici pour les images 6 à 9 c'est ok, par contre 10 et 11 rien du tout.
ET le css :
-#slideshow {
position: relative;
width: 640px;
height: 310px;
padding: 15px;
margin: 0 auto 2em;
}
#slideshow .container {
position:relative;
width: 640px;
height: 310px;
overflow: hidden;
}
#slideshow .slider {
position: absolute;
left:0; top:0;
width: 400%;
height: 310px;
}
#slideshow figure {
position:relative;
display:inline-block;
padding:0; margin:0;
}
#slideshow figure:after {
position: absolute;
width: 90%; height: 90%;
}
#slideshow figcaption {
position:absolute;
left:0; right:0;
padding: 20px;
margin:0;
text-align:left;
font-family: Georgia;
background: rgba(0,0,0,0.3);
color: white;
}
@-webkit-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
100%, 120% { left: -400% }
}
@-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% }
100%, 120% { left: -400% }
}
#slideshow .slider {
/* ... avec la propriété animation */
-webkit-animation: slider 20s infinite;
-moz-animation: slider 20s infinite;
animation: slider 20s infinite;
}
#timeline {
position: absolute;
background: blue;
bottom: 15px;
left: 15px;
height: 5px;
width: 0;
/* fonction d'animation */
-webkit-animation: timeliner 20s infinite;
-moz-animation: timeliner 20s infinite;
animation: timeliner 20s infinite;
}
@-webkit-keyframes timeliner {
30%, 25%, 50%, 75%, 100% { width: 0; }
20%, 45%, 70%, 90% { width: 640px; }
}
@-moz-keyframes timeliner {
0%, 25%, 50%, 75%, 100% { width: 0; }
20%, 45%, 70%, 90% { width: 640px; }
}
@keyframes timeliner {
0%, 25%, 50%, 75%, 100% { width: 0; }
20%, 45%, 70%, 90% { width: 640px; }
}
@-webkit-keyframes figcaptionner {
0%, 20%, 45%, 70%, 95% { bottom: -55px; }
10%, 19%, 35%, 44%, 60%, 69%, 85%, 94% { bottom: 0px; }
}
@-moz-keyframes figcaptionner {
0%, 20%, 45%, 70%, 95% { bottom: -55px; }
10%, 19%, 35%, 44%, 60%, 69%, 85%, 94% { bottom: 0px; }
}
@keyframes figcaptionner {
0%, 20%, 45%, 70%, 95% { bottom: -55px; }
10%, 19%, 35%, 44%, 60%, 69%, 85%, 94% { bottom: 0px; }
}
/*animation */
#slideshow figcaption {
-webkit-animation: figcaptionner 20s infinite;
-moz-animation: figcaptionner 20s infinite;
animation: figcaptionner 20s infinite;
}
A voir également:
- Slider avec 4 images
- Code gta 4 ps4 - Guide
- Des images - Guide
- Control center 4 - Télécharger - Divers Utilitaires
- Extraire images pdf - Guide
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? - Télécharger - Photo & Graphisme
2 réponses
Salut, essayes avec ça :
Si cela ne suffit pas essayes de rajouter ça:
En espérant t'avoir aider, Nemo
#slideshow .slider {
position: absolute;
left:0; top:0;
width: 600%;
height: 310px;
}
Si cela ne suffit pas essayes de rajouter ça:
@-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%}
150%,170% {left:-600%}
}
@-moz-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%}
150%,170% {left:-600%}
}
@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%}
150%,170% {left:-600%}
}
En espérant t'avoir aider, Nemo