Partage

Problème ajout d'image sur un slideshow [Css/HTML]

Sujet résolu

21 avril 2018 à 12:53:18

Bonjour, ayant réaliser un slideshow sur mon site(avec l'aide de tutoriel également), j'ai voulu rajouter d'autre images pour obtenir la version finale.

Mais le problème est que seul les 3 première images (celle utiliser pour créé le slideshow depuis le début) défilent, les 3 autres images rajouter à la fin ne fonctionne pas.

Je ne vois pas comment résoudre ce problème, je fournis mon code source HTML et CSS.

Merci d'avance à celui/celle qui pourras m'aider

Code HTML:

<div class="contener_slideshow">
				    <div class="contener_slide">
				      <div class="slid_1"><img src="images/img1.jpg"></div>
				      <div class="slid_2"><img src="images/img2.jpg"></div>
				      <div class="slid_3"><img src="images/img3.jpg"></div>
				      <div class="slid_4"><img src="images/img4.jpg"></div>
				      <div class="slid_5"><img src="images/img5.jpg"></div>
				      <div class="slid_6"><img src="images/img6.jpg"></div>
				    </div>
				  </div>

Code CSS:

.contener_slideshow{

  width:720px;
  height:540px;
  overflow: hidden;
  position: relative;
  background-image: url(images/ciel.png);
  border: 2px solid white;
}
.slid_1, .slid_2, .slid_3, .slid_4, .slid_5, .slid_6{

  position: absolute;
  width:720px;
  height:540px;
}

.slid_1{left:0;}
.slid_2{left:720px;}
.slid_3{left:1440px;}
.slid_4{left:2160px;}
.slid_5{left:2880px;}
.slid_6{left:3600px;}

.contener_slide{

  width: 3610px;
  height: 211px;
  left:0px;
  position: absolute;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-name: anim_slide;
  -moz-animation-duration: 10s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-name: anim_slide;
  -ms-animation-duration: 10s;
  -ms-animation-iteration-count:infinite;
  -ms-animation-name: anim_slide;
  animation-duration: 10s;
  animation-iteration-count:infinite;
  animation-name: anim_slide;
}

@-webkit-keyframes anim_slide {

  0% {left:0px;}
  22% {left:0px;}
  33% {left:-720px;}
  45% {left:-720px;}
  66% {left:-1440px;}
  90% {left:-1440px;}
}
@-moz-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-720px;}
  45% {left:-720px;}
  66% {left:-1440px;}
  90% {left:-1440px;}
}

@-ms-keyframes anim_slide {

  0% {left:0px;}
  22% {left:0px;}
  33% {left:-720px;}
  45% {left:-720px;}
  66% {left:-1440px;}
  90% {left:-1440px;}
}

@keyframes anim_slide {

  0% {left:0px;}
  22% {left:0px;}
  33% {left:-720px;}
  45% {left:-720px;}
  66% {left:-1440px;}
  90% {left:-1440px;}
}

-
Edité par Serkox 21 avril 2018 à 14:29:14

#Avgeek

GuillaumeBo1

21 avril 2018 à 15:45:30

normal tu as fais un slides fixe il faut maintenant le rendre dynamique.

une astuce qui évite de bousiller la taille des images quand tu as rajoute c'est de dire à ton .contener_slide de prendre automatiquement la taille de ces enfants. Sur la plupart des navigateur tes image ne seront jamais affiché car ils sortent de ton .contener_slide. il suffit de lui dire widh: fit-content; et il prendra la taille que tes slides ont besoin.

déjà ton slide est fonctionnel pour 3 maintenant il faut que tu puisses en ajouter d'autre pour ça le mieux c'est de faire un formulaire qui permet d'ajouter de nouvelle image sans avoir à passer par le code et qui te les affiches. il te faudra aussi une bdd.

En gros l'idée c'est d'ajouter une images dans ton dossier slide ou image ou imagesSlides peut importe le nom et pour chaque ajout d'image ajouté une entrée dans ta base de données avec le nom de l'image et son extension. puis sur la page de ton slide les récupérer de ta BDD et les afficher. Ensuite le CSS doit etre dynamique soit avec du PHP (oui c'est possible et tout bete mais lourd) soit avec du JavaScript mais en sachant que l'utilisateur peut choisir de le désactivé soit avec du Less que je préfère pour ma part.

Le Less permet de générer un fichier css lors de la visite du site. Il rajoute la possibilité de faire des l'objets des fonction et meme d'y ajouter du JS dedans et CE JS n'est pas bloqué par le navigateur parce qu'il est formaté en css avant d'etre lu par le navigateur

-
Edité par GuillaumeBo1 21 avril 2018 à 16:08:00

Un homme azerty en vaut deux.

Serkox

21 avril 2018 à 15:50:18

Que veux tu dire ?

Je ne comprends pas :/

Car les 3 premières images défilent mais pas les 3 suivantes.

-
Edité par Serkox 21 avril 2018 à 15:52:22

#Avgeek

GuillaumeBo1

21 avril 2018 à 16:17:40

j'ai fait une MAJ up en gros ça

@-webkit-keyframes anim_slide {
 
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-720px;}
  45% {left:-720px;}
  66% {left:-1440px;}
  90% {left:-1440px;}
}
@-moz-keyframes anim_slide
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-720px;}
  45% {left:-720px;}
  66% {left:-1440px;}
  90% {left:-1440px;}
}
 
@-ms-keyframes anim_slide {
 
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-720px;}
  45% {left:-720px;}
  66% {left:-1440px;}
  90% {left:-1440px;}
}
 
@keyframes anim_slide {
 
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-720px;}
  45% {left:-720px;}
  66% {left:-1440px;}
  90% {left:-1440px;}
}

ça marche que pour 3 tu en met plus ça plante

-
Edité par GuillaumeBo1 21 avril 2018 à 16:22:52

Un homme azerty en vaut deux.

Serkox

21 avril 2018 à 16:24:38

Ah d'acc, justement j'aimerais en mettre plus que 3, y'aurais aucun moyen de le faire uniquement en css?

#Avgeek

GuillaumeBo1

21 avril 2018 à 16:50:45

non le CSS est fixe comme le HTML. Ils font ce que tu as écrit point. le CSS4 vas apporter plus de liberté mais c'est pas pour tout de suite.

-
Edité par GuillaumeBo1 21 avril 2018 à 16:52:05

Un homme azerty en vaut deux.

Serkox

21 avril 2018 à 17:09:43

Pourtant avec les animations ca devrait fonctionner non ?

Les slid_1/2/3 fonctionne mais les 4/5/6 ne fonctionne pas, j'aimerais le faire en css car je n'ai aucune connaissance en JS et encore moins en php, de plus les BDD m'enchante pas énormément xD (même si je vais devoir m'y mettre un jour)

Après si en JS c'est faisable avec plus de 3 images et que tu as une solutions je suis preneur

#Avgeek

Lamecarlate

21 avril 2018 à 17:14:51

Bonjour,

"CSS4" n'existera jamais. Maintenant le CSS est découpé en modules qui évoluent chacun à leur rythme, avec éventuellement un numéro de version.

Et pour ton problème, Serkox : tu peux mettre plus de 3 éléments dans ton slider, mais il faut adapter le code CSS pour ça. Actuellement tes animations ont 3 étapes (6 techniquement mais identiques deux à deux), il faut que tu divises 100 en le nombre d'étapes que tu veux et que tu réajustes le positionnement des slides pour ça.

Pour 4 étapes on aurait quelque chose comme ça (non testé, je fais ça en théorie) :

@keyframes anim_slide {
  0% {left:0px;}
  25% {left:-720px;}
  50% {left:-1440px;}
  75% {left:-2160px;}
}

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Serkox

21 avril 2018 à 17:36:56

Lamecarlate a écrit:

Bonjour,

"CSS4" n'existera jamais. Maintenant le CSS est découpé en modules qui évoluent chacun à leur rythme, avec éventuellement un numéro de version.

Et pour ton problème, Serkox : tu peux mettre plus de 3 éléments dans ton slider, mais il faut adapter le code CSS pour ça. Actuellement tes animations ont 3 étapes (6 techniquement mais identiques deux à deux), il faut que tu divises 100 en le nombre d'étapes que tu veux et que tu réajustes le positionnement des slides pour ça.

Pour 4 étapes on aurait quelque chose comme ça (non testé, je fais ça en théorie) :
@keyframes anim_slide {
  0% {left:0px;}
  25% {left:-720px;}
  50% {left:-1440px;}
  75% {left:-2160px;}
}

Bonjour, ah d'accord je pense avoir compris, je me compliquais la vie, il faut juste il étape par image.

Je te remercie et je vais modifier ça tout de suite.

Edit: Modification effectuer, et ça fonctionne super c'est exactement ce que je recherchais, je vais juste modifier la durée de l'animations pour avoir le temps de voir les éléments.

Merci pour votre aide, bonne journée.

-
Edité par Serkox 21 avril 2018 à 17:39:50

#Avgeek

Zoki_Marciano

21 avril 2018 à 18:03:16

CSS4 n'existera jamais? ah bon?

https://www.w3.org/TR/selectors-4/

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

GuillaumeBo1

21 avril 2018 à 18:14:04

et donc si tu en rajoute tu es obligé de rechanger dans ton code CSS ta @keyframes vive la simplicité :euh: Et CSS4 est en plein développement Lamecarlate

Serkox a écrit:

Après si en JS c'est faisable avec plus de 3 images et que tu as une solutions je suis preneur

en gros tu récupère le nombre d'image se trouvant dans ta div .contener_slide et tu lui dit de diviser ta @keyframe en autant de fois qu'il y a d'image.

-
Edité par GuillaumeBo1 21 avril 2018 à 18:22:30

Un homme azerty en vaut deux.

EmmanuelBeziat

21 avril 2018 à 18:41:06

Non, le CSS4 n'existera jamais. D'ailleurs, on ne parle plus de "CSS3", juste de CSS. Le CSS n'est plus versionné, mais traités en modules qui évoluront à leur rythme.

Et ça http://www.w3.org/TR/selectors-4/ ne parle en aucun cas de "css4". C'est juste la future version 4 du module "selectors" (comme son nom l'indique justement) qui comprendra entre autres le très attendu :required.

Flexbox est actuellement en version 1 http://www.w3.org/TR/css-flexbox-1/, display en version http://www.w3.org/TR/css-display-3/, grid-layout en version 1 http://www.w3.org/TR/css-grid-1/… etc.

-
Edité par EmmanuelBeziat 21 avril 2018 à 18:49:22

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Lamecarlate

21 avril 2018 à 19:08:12

(ah bin je voulais répondre mais rhooManu a dit exactement ce que je voulais dire)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Serkox

21 avril 2018 à 19:25:05

Le fait de changer le code n'est pas un problème Et merci pour l'idée avec le JS.

GuillaumeBo1 a écrit:

et donc si tu en rajoute tu es obligé de rechanger dans ton code CSS ta @keyframes vive la simplicité Et CSS4 est en plein développement Lamecarlate

Serkox a écrit:

Après si en JS c'est faisable avec plus de 3 images et que tu as une solutions je suis preneur

en gros tu récupère le nombre d'image se trouvant dans ta div .contener_slide et tu lui dit de diviser ta @keyframe en autant de fois qu'il y a d'image.

-
Edité par GuillaumeBo1 il y a environ 1 heure

#Avgeek