C&C Docs
Log in

cnc-carousel2

A slider built on Splide, configured by one object rather than a dozen attributes. Whatever Splide's options accept goes in config — including breakpoints, autoplay and vertical direction, none of which its sibling cnc-carousel exposes. The library is fetched from a CDN on mount.

Quick start

Slides are the direct children. Bind $config to a Splide options object.

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
 
// the block's controller
export default {
  configDefault: { type: 'slide', perPage: 3, arrows: true, pagination: true },
}

<cnc-carousel2 $config="configDefault">
  <div><div class="box">Slide 1</div></div>
  <div><div class="box">Slide 2</div></div>
</cnc-carousel2>

// the inner box carries the height: Splide clears `height` from the
// slide's own inline style in a horizontal carousel.

Two ways to pass the config

Route How Carries
$config The prop. Serialised to a data-config attribute and parsed back on mount. JSON only. Numbers, strings, booleans, nested objects — no functions.
el._config An object assigned onto the element from page script. Wins when it is an object. Anything, including functions. It is passed to Splide as-is, with no JSON round trip.

Prefer $config: it lives with the rest of the block's state and is in the server-rendered HTML. Reach for _config only when an option genuinely needs to be a function.

Things to know

  • config replaces, it does not merge. Passing { perPage: 2 } also drops arrows and pagination, because the default object is gone. Spell out everything you want.
  • It mounts 200 ms late, on purpose. The widget waits before constructing Splide, so the carousel appears a beat after the rest of the page even once the CDN has responded. Slides are visible but unstyled in the meantime.
  • The config is read once. There is no observer on data-config, so changing the bound value after mount rebuilds nothing.
  • Splide owns the slide's inline height. In a horizontal carousel it clears height from every slide's style attribute — it manages that property itself, and only sets it for direction: 'ttb'. So a height written directly on a slide disappears once the library mounts. Put the box inside the slide, as every example on this page does, or size it with a class.
  • Slides are mutated in place. Each direct child has splide__slide added to it at mount. <template> children are skipped, which is why an x-for works.
  • No instance, no events. Nothing is exposed, so the carousel cannot be driven from the page — no "go to slide 3", no "which slide is showing". If you need that, cnc-carousel at least dispatches slide-change.

Usage guidance

Choose between the two carousels by what you need to configure. cnc-carousel2 passes a whole options object through, so breakpoints, autoplay, vertical direction and Splide's accessibility strings are all available — but it reports nothing back. cnc-carousel has a fixed set of attributes, thumbnails and pinch-zoom, and dispatches slide-change. For a plain horizontal shelf that needs no library at all, cnc-scrollx is cheaper than either.

← Back to Widgets