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-slideshowlispan {
  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-slideshowlidiv {
  z-index: 1000;
  position: absolute;
  bottom: 40px;
  right: 5px;
  width: 90%;
  text-align: center;
  opacity: 0;
  animation: titleAnimation 180s linear infinite 0s;
}
.cb-slideshowlidiv {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 60px;
  padding: 10px10px;
  margin: 20px;
  line-height: 60px;
  color: #ffffff;
  text-shadow: 0px0px4pxrgba(0, 0, 0, 1);
}
.slide {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 60px;
  padding: 10px10px;
  margin: 20px;
  line-height: 60px;
  color: #ffffff;
  text-shadow: 0px0px4pxrgba(0, 0, 0, 1);
}
.slideh1 {
  right: 5px;
  margin: 25px;
  font-size: 80px;
  color: #E2001A;
  font-family: 'Bree Serif', serif;
  text-shadow: 0px0px4pxrgba(0, 0, 0, 1);
}
.slideh2 {
  right: 5px;
  margin: 25px;
  font-size: 80px;
  color: #FFFFFF;
  font-family: 'Bree Serif', serif;
  text-shadow: 0px0px4pxrgba(0, 0, 0, 1);
}
.cb-slideshowli:nth-child(1) span {
  background-image: url(assets/images/background/em.jpg)
}
.cb-slideshowli:nth-child(2) span {
  background-image: url(assets/images/background/Madden-NFL-15-Game-HD-Wallpaper.jpg);
  animation-delay: 20s;
}
.cb-slideshowli:nth-child(3) span {
  background-image: url(assets/images/background/xmas.jpg);
  animation-delay: 40s;
}
.cb-slideshowli:nth-child(4) span {
  background-image: url(assets/images/background/Brees-Wallpaper-2560x1440.jpg);
  animation-delay: 60s;
}
.cb-slideshowli:nth-child(5) span {
  background-image: url(assets/images/background/nextgen.jpg);
  animation-delay: 80s;
}
.cb-slideshowli:nth-child(6) span {
  background-image: url(assets/images/background/borussia.jpg);
  animation-delay: 100s;
}
.cb-slideshowli:nth-child(7) span {
  background-image: url(assets/images/background/19757-football-stadium-1920x1200-sport-wallpaper.jpg);
  animation-delay: 120s;
}
.cb-slideshowli:nth-child(8) span {
  background-image: url(assets/images/background/f1.jpg);
  animation-delay: 140s;
}
.cb-slideshowli:nth-child(9) span {
  background-image: url(assets/images/background/superbowl.jpg);
  animation-delay: 160s;
}
.cb-slideshowli:nth-child(2) div {
  animation-delay: 20s;
}
.cb-slideshowli:nth-child(3) div {
  animation-delay: 40s;
}
.cb-slideshowli:nth-child(4) div {
  animation-delay: 60s;
}
.cb-slideshowli:nth-child(5) div {
  animation-delay: 80s;
}
.cb-slideshowli:nth-child(6) div {
  animation-delay: 100s;
}
.cb-slideshowli:nth-child(7) div {
  animation-delay: 120s;
}
.cb-slideshowli:nth-child(8) div {
  animation-delay: 140s;
}
.cb-slideshowli: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
  }
}
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><ulclass="cb-slideshow"><ul><li><span>Image 01</span><divclass="slide">{{SP1}}</div></li><li><span>Image 02</span><divclass="slide">{{SP2}}</div></li><li><span>Image 03</span><divclass="slide">{{SP3}}</div></li><li><span>Image 04</span><divclass="slide">{{SP4}}</div></li><li><span>Image 05</span><divclass="slide">{{SP5}}</div></li><li><span>Image 06</span><divclass="slide">{{SP6}}</div></li><li><span>Image 07</span><divclass="slide">{{SP7}}</div></li><li><span>Image 08</span><divclass="slide">{{SP8}}</div></li><li><span>Image 09</span><divclass="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"