assistance Required: Infinite Loop and Fade Effect for Carousel in Nicepage

Dear Nicepage Support Team,

I hope you can assist me with an issue I’m experiencing with the Nicepage Builder. I’m trying to create a carousel that automatically loops infinitely while also applying a fade effect at the edges. My goal is for the carousel items to smoothly fade in and out of the background while the carousel continuously scrolls.

I attempted to use the following custom CSS code:

.karusell {
width: 100%;
overflow: hidden;
position: relative;
}

.karusell .karusell-wrapper {
display: flex;
animation: scroll 20s linear infinite;
}

.karusell .karusell-item {
flex: 0 0 auto;
width: 20%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}

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

.karusell .karusell-wrapper::before,
.karusell .karusell-wrapper::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 10%;
z-index: 2;
pointer-events: none;
}

.karusell .karusell-wrapper::before {
left: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.karusell .karusell-wrapper::after {
right: 0;
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.karusell:hover .karusell-item {
opacity: 1;
}

However, the effect is not working as expected. There are issues with both the infinite looping and the fade effect at the edges.

Questions:

1.  Are there any known limitations or compatibility issues with custom CSS in the Nicepage Builder that might prevent this from working?
2.  Could you provide guidance or instructions on how I might correctly implement this animation?
3.  Is there a better method or built-in feature that I should consider using instead?

I greatly appreciate your support and look forward to your response.

Best regards
Niklaas