A member of the Etch community, Daniel, posted a continuous slider feature. It is very nice, but it wasn’t working for me, so I did some digging. The issue turned out to be that the actual animation wasn’t included in the template. That is likely because you can’t nest animations in CSS. The JSON is available in the component section.

Image 137 706x2000
UPDATE June 26, 2026: This is a major refactor. Now includes vertical scrolling, and almost everything is a prop.

The Code

I tried to use it as is from Daniel, but since some classes were missing from what he shared, this version should include all the necessary code. Also, to truly get a continuous slider, you need two loops of the same content. For the second set of list items, set aria-hidden so that screen readers don’t read the list twice.

This section contains all the necessary pieces. You do need to have Automatic CSS, or you will need to manually build some features (e.g., content-grid).

In this, I added an option to pause the animation when the cart is hovered.

The speed of the slider and the width of the cards depend on how many posts you show, so adjust as needed.

I placed this animation in the Automatic CSS Global setting, but it can be added anywhere that is globally available.

@keyframes slider-scroll-x {

  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}

@keyframes slider-scroll-y {
  from {
    transform: translateY(var(--scroll-start));
  }
  to {
    transform: translateY(var(--scroll-end));
  }
}

@media (prefers-reduced-motion: reduce) {

  .slider {

    overflow: visible;

    -webkit-mask-image: none;

    mask-image: none;

    & .slide-track {

      animation: none !important;

      will-change: auto;

      &[aria-hidden='true'] {

        display: none;

      }
    }
  }
}
CSS