DailyKadenceWP 7: Infinite Testimonial Carousel

It’s commonly used to display the testimonial elements in an infinite-moving carousel.

/Here is a preview of the end result:

How it’s built:

I built this section using the Infobox block as a testimonial container and CSS animation.

This is the CSS I used:

/* Infinite Testimonial Carousel */
/* Adding overflow hidden and display flex for the parent container */
.infinite-testimonial .kt-inside-inner-col {
   overflow: hidden;
   margin: 0 auto;
}
/* adding width and animation for the child element */
.infinite-testimonial .testimonial-box {
   min-width: 450px; 
   animation: slide 40s linear infinite;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1500px, 0, 0);   }
} 

(This infinite animated carousel can be used using this type of structure and any other blocks as children: Text, Image).

You can find everything in action on my KadenceWP Demo Web site: Infinite Testimonial Carousel.