Bonjour,

Cela fait maintenant un moment que je bloque sur le carousel du site que je suis entrain de développer. J'utilise les keyframes pour faire défiler mes images or lorsque j'arrive à ma dernière image, celle-ci reste blanche et ne s'affiche pas puis le carousel recommence au début.

Pourriez-vous m'aider ?

<div id="slider_home" class="slideshow">
         <div class="carousel-inner">
            <ul>
                <li>
                  <img class="slide_img" id="slider_home1" class="" src="./img/background/crepel.jpg" alt="Slide Crêpe 3">
                </li>
                <li>
                  <img class="slide_img" id="slider_home2" class="" src="./img/background/labolee2n.png" alt="Slide Crêpe 2">
                </li>
                <li>
                  <img class="slide_img" id="slider_home3" class="" src="./img/background/labolee1n.png" alt="Slide pancakes">
                </li>
                <li>
                  <img class="slide_img" id="slider_home4" class="" src="./img/background/labolee3n.png" alt="Slide Crêpe">
                </li>
                 <li>
                  <img class="slide_img" id="slider_home1" class="" src="./img/background/crepel.jpg" alt="Slide Crêpe 3">
                </li> 

            </ul>
         </div>

@keyframes slidy {
  0%{left:0%;}
  18%{left:0%;}
  
  25%{left:-100%;}
  43%{left:-100%;}
  
  50%{left:-200%;}
  68%{left:-200%;}
  
  75%{left:-300%;}
  93%{left:-300%;}
  
  100%{left:-400%;}
}

.slideshow{
	position: relative;
	top:0px;
	left:0px;
	z-index: -1;
	margin: auto auto;
	background: none;
	overflow: hidden;
	display: flex;
	white-space: nowrap;
}

.slideshow ul{
	width: 400%;
	height: auto;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
	animation: 4s slidy infinite;
}
.slideshow ul li 
{
	width:25%;
	float:left;
}
.slideshow ul li img.slide_img{
	height: 100vh;
	width: 100vw;
}

Salut,

Edit complet:

Ton slideshow ul doit faire le nombre de diapositive x 100% : ici 5 diapos donc 500%

Ton slideshow ul li doit faire 100% / le nombre de diapositive : ici 20% donc

Je t'ai édité un jsfiddle pour te donner un exemple et j'ai modifié un peu ton animation pour qu'on se rende mieux compte et qu'il y ait une animation pour le rembobinage du carousel.

https://jsfiddle.net/yshwk042/

Tiens nous au courant !

-
Edité par Offkors 16 mai 2018 à 16:17:49

Bonjour,

Vite vu en passant: la 5ème image porte le même id (id="slider_home1") que la première.

(y compris sur ton code Offkors).

A corriger.