Question 224700 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – CSS Text Slideshow: After Second Slide, All Slides Merge. How to Fix?

Actually, I am currently working on making a pure CSS text slideshow as a topbar in my site’s header.

The code I have created is:

HTML

<div class="slider">
    <p class="slide">30% to 60% off Sitewide  |  Extra 30% off Sale</p>
    <p class="slide">20% off Refer a Friend</p>
    <p class="slide">Extra 10% off on Prepaid Orders</p>
    <p class="slide">Clearance Sale is LIVE</p>
</div>

CSS

.slider{position:relative;height:40px;padding:0 10px;background:#000;color:#fff;font-size:13px}

.slider .slide{position:absolute;animation:slider 16s cubic-bezier(1,0,0,1) infinite;transform:translateX(-5%);transition:all 4s cubic-bezier(1,0,0,1);opacity:0}

.slider.paused .slide{animation-play-state:paused}

.slider .slide:nth-child(2){animation-delay:8s}

.slider .slide:nth-child(3){animation-delay:12s}

.slider .slide:nth-child(4){animation-delay:16s}

@keyframes slider{
0%{transform:translateX(-5%);opacity:0}
7.5%,33%{transform:translateX(0);opacity:1}
75%,100%{transform:translateX(5%);opacity:0}
}

JQuery

$(".slider").hover(
    function(){
        $(this).toggleClass("paused");
    }
);

Now, everything works fine until I use only 2 slides. But, as I increase the number of slides to 4. First 2 sides does the transition perfectly and then all slides merge and show one behind one, at the same time. I believe the problem is with animation-delay or something. But, I could not figure out what.

I tried to change animation-delay property and see if it works, but it did not.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out. When you increase the number of slides, increase the total animation duration and set animation-delay for each slide. You will also have to adjust the keyframes. For 2 slides, keyframe points will be different, and for 3 or 4 slides, the animation gap among slides will be adjusted.


  2. 0

    It appears that the issue is indeed connected to the animation-delay property. When you incorporate more than two slides, the delay values need to be adjusted to ensure that each slide animates at the correct time. Let’s modify the animation-delay values for the additional slides to resolve the combining problem. We’ll adjust the animation-delay for the third slide to 8 seconds and for the fourth slide to 12 seconds. Additionally, we’ll update the animation duration to 16 seconds to accommodate the longer delay for the fourth slide.

    Here’s the updated CSS code:

    .slider {
  position: relative;
  height: 40px;
  padding: 0 10px;
  background: #000;
  color: #fff;
  font-size: 13px;
}

.slider .slide {
  position: absolute;
  animation: slider 16s cubic-bezier(1, 0, 0, 1) infinite;
  transform: translateX(-5%);
  transition: all 4s cubic-bezier(1, 0, 0, 1);
  opacity: 0;
}

.slider paused .slide {
  animation-play-state: paused;
}

.slider .slide nth-child(2) {
  animation-delay: 8s;
}

.slider .slide nth-child(3) {
  animation-delay: 12s;
}

.slider .slide nth-child(4) {
  animation-delay: 16s;
}

@keyframes slider {
  0% {
    transform: translateX(-5%);
    opacity: 0;
  }
  7.5%, 33% {
    transform: translateX(0);
    opacity: 1;
  }
  67%, 100% {
    transform: translateX(5%);
    opacity: 0;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search