Kevin Powell - Community•12mo ago

Custom Carousel Question! How do I get the end of an animation to stick?

I'm way over my head in css and any help or suggestions would be greatly appreciated! I'm trying to make a special carousel for the testimonials, and I'm sorta happy with how this came out, but I'm unsure how to continue so that it stays at the new location and the old front testimonial moves back (so they switch)

9 Replies

MarkBoots•12mo ago

can't see it in your code, but i suspect you do the animation in css on hover. unfortunatly the forward state won't stay if you unhover it. think you'll need to use some js. on mouseover add a class that has the animation.

Light•12mo ago

I see! Thanks for responding How would I go about adding an animation for one to come forward and the other one to go in the back in a continous way so I can have more than 2?

MarkBoots•12mo ago

you can have a collection of the cards, and with an interval function you iterate over them to set a new active for example

const cards = document.querySelectorAll(".cards");
let activeCard = 0;
setInterval(()=>{
  cards[activeCard].classList.remove("active"); // remove current active
  activeCard = (activeCard + 1) % cards.length; // increase index 
  cards[activeCard].classList.add("active"); // add new active
}, 5000)

const cards = document.querySelectorAll(".cards");
let activeCard = 0;
setInterval(()=>{
  cards[activeCard].classList.remove("active"); // remove current active
  activeCard = (activeCard + 1) % cards.length; // increase index 
  cards[activeCard].classList.add("active"); // add new active
}, 5000)

with the .active class having the animation in css

Light•12mo ago

I see! Thank you so so much, this is more than enough info to get me past this hurdle Can't thank you enough!

MarkBoots•12mo ago

no problem, good luck on the project

Light•12mo ago

This is as far as I got, but it is so much better than what I had before!!! Thank you so so much @MarkBoots I still need to fix the background blue and zIndex for it to look smoother, but this is progress 🙂

Light•12mo ago

Thank you so so much

MarkBoots•12mo ago

looks good so far! well done!

Light•12mo ago

Thanks! Still a few bugs to fix, but I think it is coming along Do you think I need to add a progress bar of some kind to show when the next change will happen?

Gaming

Programming

Custom Carousel Question! How do I get the end of an animation to stick?