Slide show

Bonsoir a tous,

je suis actuellement en train d'integrer un slideshow sur ma page web mais il y a un probléme, les images de ce superpose pas donc ne bouge pas...Je pense pourtant n'avoir fait aucun erreur..
Je vous met mon code ci dessous au cas ou quelqu'un trouverais une solution a mon probléme.

<section id="slideshow">
    
  <div class="container">
    <div class="c_slider"></div>
    <div class="slider">
      <figure>
        <img src="<a href="http://zupimages.net/viewer.php?id=16/17/lvfg.png"><img src="http://zupimages.net/up/16/17/lvfg.png" alt="" /></a>" alt="" width="640" height="310" />
        <figcaption>Référencement Esports Français </figcaption>

      </figure><!--
      --><figure>
        <img src="<a href="http://zupimages.net/viewer.php?id=16/17/lvfg.png"><img src="http://zupimages.net/up/16/17/lvfg.png" alt="" /></a>" alt="" width="640" height="310" />
        <figcaption>Let's cross that bridge when we come to it</figcaption>
      </figure><!--
      --><figure>
        <img src="<a href="http://zupimages.net/viewer.php?id=16/17/lvfg.png"><img src="http://zupimages.net/up/16/17/lvfg.png" alt="" /></a>" alt="" width="640" height="310" />
        <figcaption>Sushi<em>(do)</em> time</figcaption>

      </figure><!--
      --><figure>
        <img src="<a href="http://zupimages.net/viewer.php?id=16/17/lvfg.png"><img src="http://zupimages.net/up/16/17/lvfg.png" alt="" /></a>" alt="" width="640" height="310" />
        <figcaption>Waking Life</figcaption>
      </figure>
    </div>
  </div>
    
  <span id="timeline"></span>
</section>



[code]

#slideshow:before,
#slideshow:after {
	position: absolute;
	bottom:16px;
	z-index: -10;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
	left:0;
	transform: rotate(-4deg);
}
#slideshow:after {
	right:0;
	transform: rotate(4deg);
}

Modifié par Falso (27 Apr 2016 - 21:55)

Christele a écrit :
Reviends lorsque tu aura revu tes bases et fait un peut attention, merci

Je ne sais pas si c'est l'écriture tardive de ce post qui produit ça, mais c'est pas très sympa pour Falso qui poste sa première demande sur le forum de manière tout à fait correcte...
De plus, il y a des erreurs, mais on est dans la section "débutant" et c'est normal de faire des erreurs (comme toi par rapport à l'orthographe de cette dernière phrase...).

Donc oui Falso, il faut que tu supprimes comme te l'explique Christele, les éléments dupliqués dans ton code HTML :

<img src="

et

" alt="" width="640" height="310" />

Il faut que ta balise <a> ne contienne que ça :

<a href="http://zupimages.net/viewer.php?id=16/17/lvfg.png"><img src="http://zupimages.net/up/16/17/lvfg.png" alt="" width="640" height="310"/></a>

Pour finir, ton attribut "alt" devrait contenir quelque chose si ton image peut être décrite. Tu peux le laisser vide si c'est une image purement illustrative (icône, repère visuel...).
Ça devrait mieux fonctionner après.

Tien je pense que cela pourrait t'aider, voir te donner un petit aperçue si c'est bien ça que tu veux faire : http://codepen.io/Golderen/pen/EKdNMY

Golderen, pourrai tu juste me donner le code afin que le slideshow soit automatiser pour que les images bouge toutes seul ?
Merci d'avance.

Il y a un début a tout, j'ai commencé il y a 5 mois de cela ^^

Attention c'est une simple idée en full Css, après tu peux trouver de bon Slide Show en Jquery qui seront surement plus fluide, esthétique. Après tout dépends de ce que tu veux en faire.

Je t'invite a consulté ce lien :
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS

Qui vas te permettre d'en savoir un peux plus sur le pourquoi du comment

Animation est un attribut CSS qui permet de comme sont nom l'indique animé des éléments.
N'importe lequel.
Mais bien sure comment on l'attend le fameux Mais ! Il faut bien que tu utilise

animation: /* Tes valeurs */ ;
-moz-animation : /* Tes valeurs */ ;
-webkit-animation: /* Tes valeurs */ ;

Pour évité les problèmes de compatibilité ici :
http://caniuse.com/#search=animation

Pour créer une animation tu vas devoir créer une balise dans la même feuille de style mais pas dans animation.

Comme ceci :

@keyframes /*le_nom_de_ton_animation*/ {
/* Tes valeurs */
}

animation: /* Tes valeurs */;

Keyframes sert a donner la configuration de ton animation.
Imaginons, tu veux que ton texte change de couleur et grossisse lorsque tu met un élément :hover.
Tu vas avoir 2 paramètres Sois :

@keyframes monZoom{ /* le nom que tu veux donné a l'animation ici "monZoom" */
from { transform : scale(1, 1); color: blue: }  /* From est pour définir la valeur de départ */
to { transform : scale(2, 2); color: green; } /* To est pour définir la valeur d'arrivé */ 
}

p:hover{
animation: monZoom 2s ease;
}

Ou alors :

@keyframes monZoom{ /* le nom que tu veux donné a l'animation ici "monZoom" */
50% { transform : scale(1, 1); color: blue: } 
100% { transform : scale(2, 2); color: green; } 
}

p:hover{
animation: monZoom 2s ease;
}

Ici les % permette de définir ce que l'action doit faire selon le temps.
En gros a 50% des 2 s donc a 1s l'animation vas avoir lieux.

Enfin je te conseille de bien lire l'article que je t'ai envoyer sur le développer moz.

Mais si tu commence juste le html css, lit bien les cours de Mathieu Nebra sur OPC qui t'aideront beaucoup. Surtout lit bien ne lit pas en diagonal ^^

Je ne te conseille pas de manipuler les animations au tout début, c'est assez compliqué x)
( J'ai encore du mal )


Si toute fois tu as des questions ou besoin d'aide pour les début n'hésite pas a me MP !

Bonne journée.

Oops oublié de préciser c'est la valeur " infinite " qui permet de jouer l'animation en boucle !

Comme ceci :

animation: monSlide 10s infinite;