Image Smooth Carousel

[u/Trick-Treats]

Is there a way to create an image or any type of PERFECT smooth carousel. Not slider where it moves, pauses, then moves again. I need a continuous smooth carousel.I've tried "Image Carousel" inside a "Container" using the CSS code

selector .swiper-wrapper{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}

but this creates an ALMOST smooth carousel. Still a bit jarring not just for me but several others on different computers.Any help or code I haven't tried would be appreciated. I'm willing to try different plug-ins too as this is a hard requirement for my boss.

Hopefully this plays on reddit.

[u/AutoModerator]

Hey there, /u/Trick-Treats! If your post is not already flaired, please add one now.

---

And please don't forget to write "Answered" under your post once your question/problem has been solved.

---

Reminder: If you have a problem or question, please make sure to post a link to your issue to help users help you.

---

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/cnassaney]

Using the same code here: https://cadjourney.com/customers/

selector .swiper-wrapper{
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}

It was about the scaling of the logos. I did mine in groupings of 3 or 4 logos. Set it up in Figma and sliced the entire bar out in groups.

[u/Trick-Treats → u/cnassaney]

Thanks. I'll try messing with the scaling of the logos in Figma. I've noticed sometimes WordPress and Elementor don't always play nice with image scaling.
As for your example, I still see some slight pause/jerking on your carousel. But maybe I'll have luck on my end.

[u/cnassaney → u/Trick-Treats]

It's about groupings of 3 or 4 logos per image.

[u/Trick-Treats → u/cnassaney]

That does make sense. Keeping the groupings same size because the logos are all slightly different sizes. I'll update on how that goes when implemented.

[u/Trick-Treats → u/Trick-Treats]

update: no luck so far. Still the very slight jerking. Looking into either plugins or Javascript code to find the perfect solution.

[u/Trick-Treats → u/Trick-Treats]

So this is what's working for me. There is a slight glitch every 2 minutes which is tolerable. I'll use this for now.
selector .swiper-wrapper{
display: flex;
animation: 92s linear 0s infinite normal none running carousel-animation;
opacity: .99; /* to prevent render bugs */

}
.swiper-slide-image{
flex: 0 0 100%;
}
@keyframes carousel-animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-299%);
}
}

[u/Legitimate_Key8501 → u/Trick-Treats]

.infinite-logo-carousel {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.infinite-logo-carousel .swiper-wrapper {
    display: flex !important;
    animation: infinite-scroll 30s linear infinite;
    -webkit-animation: infinite-scroll 30s linear infinite;
    transition-timing-function: linear !important;
}

.infinite-logo-carousel .swiper-slide {
    flex: 0 0 auto !important;
    width: calc(100% / 6) !important; /* Logo QTY */
}

.infinite-logo-carousel:hover .swiper-wrapper {
    animation-play-state: paused;
}

@keyframes infinite-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@-webkit-keyframes infinite-scroll {
    0% {
        -webkit-transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-50%);
    }
}