18100 sujets

Questions générales et questions de débutants

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)
Bonjour,
Oui ,il faut virer ces champs en erreur Smiley decu TOUT tes

 <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" />


Le probléme n'est pas que la mais bon .....
alt="" width="640" height="310" /> Smiley confused

Bien sur il y a également les

<img src="<a href="http://zupimages.net/viewer.php?id=16/17/lvfg.png">


Reviends lorsque tu aura revu tes bases et fait un peut attention, merci Smiley rolleyes
Modifié par Christele (28 Apr 2016 - 01:52)
Bonjour,
Christele a écrit :
Reviends lorsque tu aura revu tes bases et fait un peut attention, merci Smiley rolleyes

Oui, enfin si on parle des fautes d'orthographe, il y en a qui devrait également faire attention.

Mais bon, oui, je ne sais même pas comment tu arrives à voir des images avec ton code ! Smiley eek
Bonjour à tous,

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

Est-il possible de soigner davantage l'accueil des nouveaux arrivants ?
Nous avons tous débuté, fait des erreurs, tous appris de quelqu'un d'autre... Smiley smile

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

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... Smiley ohwell
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.
Bonjour a tous et merci pour vos réponse (Golderen c'est exactement ce que je voulais merci beaucoup Smiley langue )
désolé si mon code vous a choquer mais cela fait seulement 2 semaine que j'apprend le html css..
Je remercie toute les personnes gentilles qui m'ont aider.
Bonne journée! Smiley langue Smiley langue
Modifié par Falso (28 Apr 2016 - 17:58)
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 Smiley murf

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;
Sujet clos
Aller à