Skip to content Skip to sidebar Skip to footer
Home / Css / Css Animations / Html

CSS3 Slider With More Than 6 Images

Post a Comment
I am using a nice CSS3 slider for a slideshow in our canteen. The slider is awesome but it has a bug and the developer seems to be no longer active. If you add more than 6 items to

Solution 1:

The answer to your question is already present in the link that you'd provided in the question but I will try to explain it differently just in case you had problems understanding that.

Changing just animation-duration, animation-delay alone are not sufficient to make this animation work with more no. of elements. You'd have to modify the animation keyframe setting also like in the snippet provided below.

@keyframes imageAnimation {
  0% {opacity: 0; animation-timing-function: ease-in;}
  5% {opacity: 1; transform: scale(1.05); animation-timing-function: ease-out;}
  11% {opacity: 1; transform: scale(1.1) rotate(3deg);}
  16% {opacity: 0; transform: scale(1.1) rotate(3deg);}
  100% {opacity: 0;}
}
@keyframes titleAnimation {
  0% {opacity: 0; transform: translateX(200px);}
  5% {opacity: 1; transform: translateX(0px);}
  11% {opacity: 1; transform: translateX(0px);}
  13% {opacity: 0; transform: translateX(-400px);}
  25% {opacity: 0;}
  100% {opacity: 0;}
}


.cb-slideshow,
.cb-slideshow:after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
.cb-slideshow:after {
  content: '';
  background: transparent url(assets/images/background/pattern.png) repeat top left;
}
.cb-slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  backface-visibility: hidden;
  animation: imageAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
  z-index: 1000;
  position: absolute;
  bottom: 40px;
  right: 5px;
  width: 90%;
  text-align: center;
  opacity: 0;
  animation: titleAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 60px;
  padding: 10px 10px;
  margin: 20px;
  line-height: 60px;
  color: #ffffff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 60px;
  padding: 10px 10px;
  margin: 20px;
  line-height: 60px;
  color: #ffffff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h1 {
  right: 5px;
  margin: 25px;
  font-size: 80px;
  color: #E2001A;
  font-family: 'Bree Serif', serif;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h2 {
  right: 5px;
  margin: 25px;
  font-size: 80px;
  color: #FFFFFF;
  font-family: 'Bree Serif', serif;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.cb-slideshow li:nth-child(1) span {
  background-image: url(assets/images/background/em.jpg)
}
.cb-slideshow li:nth-child(2) span {
  background-image: url(assets/images/background/Madden-NFL-15-Game-HD-Wallpaper.jpg);
  animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) span {
  background-image: url(assets/images/background/xmas.jpg);
  animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) span {
  background-image: url(assets/images/background/Brees-Wallpaper-2560x1440.jpg);
  animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) span {
  background-image: url(assets/images/background/nextgen.jpg);
  animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) span {
  background-image: url(assets/images/background/borussia.jpg);
  animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) span {
  background-image: url(assets/images/background/19757-football-stadium-1920x1200-sport-wallpaper.jpg);
  animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) span {
  background-image: url(assets/images/background/f1.jpg);
  animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) span {
  background-image: url(assets/images/background/superbowl.jpg);
  animation-delay: 160s;
}
.cb-slideshow li:nth-child(2) div {
  animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) div {
  animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) div {
  animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) div {
  animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) div {
  animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) div {
  animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) div {
  animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) div {
  animation-delay: 160s;
}
@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  5% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }
  11% {
    opacity: 1;
    transform: scale(1.1) rotate(3deg);
  }
  16% {
    opacity: 0;
    transform: scale(1.1) rotate(3deg);
  }
  100% {
    opacity: 0
  }
}
@keyframes titleAnimation {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  5% {
    opacity: 1;
    transform: translateX(0px);
  }
  11% {
    opacity: 1;
    transform: translateX(0px);
  }
  13% {
    opacity: 0;
    transform: translateX(-400px);
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<ul class="cb-slideshow">
  <ul>
    <li><span>Image 01</span>
      <div class="slide">{{SP1}}</div>
    </li>
    <li><span>Image 02</span>
      <div class="slide">{{SP2}}</div>
    </li>
    <li><span>Image 03</span>
      <div class="slide">{{SP3}}</div>
    </li>
    <li><span>Image 04</span>
      <div class="slide">{{SP4}}</div>
    </li>
    <li><span>Image 05</span>
      <div class="slide">{{SP5}}</div>
    </li>
    <li><span>Image 06</span>
      <div class="slide">{{SP6}}</div>
    </li>
    <li><span>Image 07</span>
      <div class="slide">{{SP7}}</div>
    </li>
    <li><span>Image 08</span>
      <div class="slide">{{SP8}}</div>
    </li>
    <li><span>Image 09</span>
      <div class="slide">{{SP9}}</div>
    </li>
  </ul>
</ul>

The following are key for infinite loop animations with multiple elements to work without overlapping:

  • The animation-duration on each element should be equal to the sum total of time required for all elements to complete their animation. For nine elements to animate (fade in, stay visible, fade out cycle) for 20s each the animation-duration on each element should be 9*20s = 180s.

  • Each element should animate only for that 20s duration, for the rest of the time they should stay idle in-order for them to not overlap with the previous or the next element. This can be achieved using the following two settings.

    • First is to make each element start their animation only after all the previous elements have completed their own animation. So, the first element would have no delay, the second would have delay of 20s (amount of time for 1 element's animation), the third would have a of 40s (time take for first two elements' animation) and so on for the subsequent elements.
    • Second is to make the elements remain idle for the remaining 160s (total animation duration - animation time for each element). This is needed because during that time the other elements are doing their animation.This is achieved by modifying the keyframe settings such that the amount of time taken for each element to fade-in and stay visible is roughly equal to the total animation duration divided by total no. of elements (which is nothing but 1/9 of 100%).
    • In the original animation you'd provided in question (for 6 elements), each element went from opacity: 0 at 0% to opacity: 1 at 8% and stayed as-is till 16% (which is 1/6 of 100%). Here, since you have 9 elements, the fade-out should start at 11% (which is roughly 1/9 of 100%). So, we change the keyframe settings to make the elements go from opacity: 0 at 0% to opacity: 1 at 5% and then stay with opacity: 1 till 11%. After that is slowly starts fading out till it reaches the 16% mark.

Post a Comment for "CSS3 Slider With More Than 6 Images"