Example home page caption text

Labore esse nostrum minus ullam error nihil quod nisi architecto odio distinctio iure commodi in dolore assumenda aliquid quisquam laborum eos eos beatae cum eum.

Rem odit asperiores similique sint sed enim rerum molestiae ea est molestiae cumque libero ipsam omnis inventore necessitatibus excepturi corrupti dolor accusantium exercitationem nulla cum commodi culpa laudantium qui id quam eos dolorem quod illo sed natus optio in nihil consectetur incidunt fugiat est temporibus minus assumenda quasi id tempora.

Nemo ipsum sunt excepturi ea voluptas sit et reprehenderit voluptatum aut quos placeat similique quia est labore consequatur quo quae libero beatae aut omnis dolor quam omnis dolorem eos asperiores eum maxime neque facere inventore consequatur ut iusto necessitatibus cupiditate.

News & Updates

Media slider - Scroll-snap / Sliding variant. With Autoplay. With pauseOnHover

This variant uses native scrolling (with scroll-snapping), the autoplay value, or the or the nav dots / buttons to advance to the next slide.

Resize to below 768px to see captions appear below the images

Media slider - Fade variant. With Autoplay.

This variant doesn't use native scrolling to advance to the next slide, only the autoplay value or the nav dots / buttons advance the slides

Slider - Summary card panel variant

Use native scrolling to advance, or the nav dots / button

These are essentially summary panel cards with an extra 2 elements wrapping them to give this different layout. No autoplay on this demo. Relies on CSS for sizing. Nav dots will move cards forward by how many are currently on display. That means there will be the most nav dots displaying at mobile widths, where it's 1 column per card.

We can use the 123, 124, 122, 223, 224 pattern we already have for summary cards as we wish, the JS will recalculate everything based on the amount of cards / columns of cards currently displaying.

Slider - 4 Logos

Will stop autoplaying and sliding when the max amount of slides are already displaying. Resize below 1080px width to 3 columns of cards to see nav dots appear, and see start it autoplaying again. We have removed nav arrows in the HTML for this instance.

Infinite slider - 6 Logos (one at a time)

A seamless infinite loop (like a Glide type: carousel) that advances one logo at a time. Past the last logo it continues straight into clones of the first, then silently teleports back — no visible jump. One dot per logo, so alignment holds for any number of logos at any column count.

Resize below 960px to drop to 2 columns. With 6 logos there's always more than a view to show, so it loops at every width.

Infinite slider - 7 Logos (whole view at once)

The same seamless loop, but every advance slides the whole visible view away at once (advance: "view" — moves by --card-column-count slides). Dots still track the leading logo, so it stays aligned even when the logo count isn't a multiple of the columns.

Resize below 960px to drop to 2 columns. With 7 logos there's always more than a view to show, so it loops at every width.