stackoom
  简体   繁体   中英

CSS3 Slider with more than 6 images

 原文  2015-12-12 23:52:20  7   1    html/ css/ css3/ css-animations

Question

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 the slideshow it overlaps and I can't find the issue. Anybody has any ideas?

Here's the fiddle 

<body id="page">
  <ul class="cb-slideshow">
    <ul>
      <!-- Background Images muessen via CSS gesetzt werden! -->    
      <li><span>Image 01</span><div class="slide">{{SP7}}</div></li>
      <li><span>Image 02</span><div class="slide">{{SP2}}</div></li>
      <li><span>Image 08</span><div class="slide">{{SP10}}</div></li>   
      <li><span>Image 04</span><div class="slide">{{SP4}}</div></li>
      <li><span>Image 05</span><div class="slide">{{SP8}}</div></li>
      <li><span>Image 06</span><div class="slide">{{SP6}}</div></li>
    </ul>
  </ul>
</body>

I reduced the CSS to a minimum. The Source is from here .

For Example, if I try with 9 elements I try these timings but it overlaps: 

.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;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 180s linear infinite 0s;
    -moz-animation: imageAnimation 180s linear infinite 0s;
    -o-animation: imageAnimation 180s linear infinite 0s;
    -ms-animation: imageAnimation 180s linear infinite 0s;
    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;
    -webkit-animation: titleAnimation 180s linear infinite 0s;
    -moz-animation: titleAnimation 180s linear infinite 0s;
    -o-animation: titleAnimation 180s linear infinite 0s;
    -ms-animation: titleAnimation 180s linear infinite 0s;
    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);
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(assets/images/background/xmas.jpg);
    -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    -o-animation-delay: 40s;
    -ms-animation-delay: 40s;
    animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(assets/images/background/Brees-Wallpaper-2560x1440.jpg);
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) span {
     background-image: url(assets/images/background/nextgen.jpg);
    -webkit-animation-delay: 80s;
    -moz-animation-delay: 80s;
    -o-animation-delay: 80s;
    -ms-animation-delay: 80s;
    animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(assets/images/background/borussia.jpg);
    -webkit-animation-delay: 100s;
    -moz-animation-delay: 100s;
    -o-animation-delay: 100s;
    -ms-animation-delay: 100s;
    animation-delay: 100s;
}

.cb-slideshow li:nth-child(7) span {
    background-image: url(assets/images/background/19757-football-stadium-1920x1200-sport-wallpaper.jpg);
    -webkit-animation-delay: 120s;
    -moz-animation-delay: 120s;
    -o-animation-delay: 120s;
    -ms-animation-delay: 120s;
    animation-delay: 120s;
}

.cb-slideshow li:nth-child(8) span {
    background-image: url(assets/images/background/f1.jpg);
    -webkit-animation-delay: 140s;
    -moz-animation-delay: 140s;
    -o-animation-delay: 140s;
    -ms-animation-delay: 140s;
    animation-delay: 140s;
}

.cb-slideshow li:nth-child(9) span {
    background-image: url(assets/images/background/superbowl.jpg);
    -webkit-animation-delay: 160s;
    -moz-animation-delay: 160s;
    -o-animation-delay: 160s;
    -ms-animation-delay: 160s;
    animation-delay: 160s;
}

.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    -o-animation-delay: 40s;
    -ms-animation-delay: 40s;
    animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 80s;
    -moz-animation-delay: 80s;
    -o-animation-delay: 80s;
    -ms-animation-delay: 80s;
    animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 100s;
    -moz-animation-delay: 100s;
    -o-animation-delay: 100s;
    -ms-animation-delay: 100s;
    animation-delay: 100s;
}

.cb-slideshow li:nth-child(7) div {
    -webkit-animation-delay: 120s;
    -moz-animation-delay: 120s;
    -o-animation-delay: 120s;
    -ms-animation-delay: 120s;
    animation-delay: 120s;
}

.cb-slideshow li:nth-child(8) div {
    -webkit-animation-delay: 140s;
    -moz-animation-delay: 140s;
    -o-animation-delay: 140s;
    -ms-animation-delay: 140s;
    animation-delay: 140s;
}

.cb-slideshow li:nth-child(9) div {
    -webkit-animation-delay: 160s;
    -moz-animation-delay: 160s;
    -o-animation-delay: 160s;
    -ms-animation-delay: 160s;
    animation-delay: 160s;
}

1 answers

solution1
 2 ACCPTED  2015-12-13 05:55:09

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 st 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 th 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 th of 100%). Here, since you have 9 elements, the fade-out should start at 11% (which is roughly 1/9 th 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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question More than one animation in CSS3 Materialize slider - How to include more than 4 images? Wrapping CSS3 Slider CSS slider with autoplay more than 3 slides CSS3 animation: rotateX to flip more than two divs css3 flex: why img take more width than contains? Css3 responsive slider automate CSS3 slider constructor with jquery CSS3 gradient jQuery slider Trying to do more than one page slider with css and js
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM