CODEWITHSUNDEEP
htmlcssanimationcarousel
Alex Nikolsky
Alex Nikolsky

Reputation: 2169

How to fix CSS carousel?

I'm trying to make a CSS carousel with three slides in it and I came across a problem. On the last iteration, the carousel shifts to the blank page. How can I fix this? I suspect it has to do with keyframes.

HTML

<div class="carousel">
   <ul class="panes">
      <li>
         <div class='text'>First</div>
      </li>
      <li>
         <div class='text'>Second</div>
      </li>
      <li>
         <div class='text'>Third</div>
      </li>
   </ul>
</div>

CSS

body, div, ul, li {
  margin: 0;
  padding-left: 0px;
}

.carousel {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

.panes {
    list-style: none;
    position: relative;
    width: 300%;
    animation: carousel 30s infinite;
}

.panes > li {
  position: relative;
  float: left;
  width: 33.3333%;
}

.carousel .text {
  display: block;
  width: 100%;
  max-width: 100%;
}

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}

JSFiddle Sandbox

Upvotes: 1

Views: 294

Answers (3)

L L
L L

Reputation: 1470

body, div, ul, li {
  margin: 0;
  padding-left: 0px;
}

.carousel {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}
.panes {
    list-style: none;
    position: relative;
    width: 300%;
    animation: carousel 30s infinite;
}
.panes > li {
  position: relative;
  float: left;
  width: 33.3333%;
}

.carousel .text {
  display: block;
  width: 100%;
  max-width: 100%;
}

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    22% { left:-100%; }
    33%   { left:-100%; }
    44% { left:-200%; }
    55%   { left:-200%; }
    66%   { left:-100%; }
    77% { left:-100%; }
    88% { left:0; }
    99%  { left:0; }
}
  <div class="carousel">
    <ul class="panes">
      <li>
        <div class='text'>First</div>
      </li>
      <li>
        <div class='text'>Second</div>
      </li>
      <li>
        <div class='text'>Third</div>
      </li>
    </ul>
  </div>

Replace your existing keyframes with this:

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    22% { left:-100%; }
    33%   { left:-100%; }
    44% { left:-200%; }
    55%   { left:-200%; }
    66%   { left:-100%; }
    77% { left:-100%; }
    88% { left:0; }
    99% { left:0; }
}

We never want to go more left than -200% with 3 slides, so we just want to adjust the keyframes like this. Let me know if this works and if anything is unclear :)

Upvotes: 1

Miquel Canal
Miquel Canal

Reputation: 1121

Do not exceed -200% on the left css property. I created a similar version using 15s and less keyframes. The animation is not the same as yours, but it will show you that using -200% is enough for three sliders. If you add more sliders, then you would need to add more %.

Here is the link: https://jsfiddle.net/Treeindev/75Lg9su2/10/

Upvotes: 1

Artifacialic
Artifacialic

Reputation: 51

Personally I found a website showing a Completely fluid and responsive CSS Carousel and it shared it's code. check out this: Fluid Carousel

there is a difference within the keyframes this person used and u used, u could take a look at this:

@keyframes carousel{
0%    { left:0; }
11%   { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25%   { left:-200%; }
36%   { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50%   { left:-400%; }
61%   { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75%   { left:-200%; }
86%   { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100%  { left:0; }

}

Upvotes: -1

Related Questions