C&C Docs
Log in

cnc-carousel

A slider built on Swiper. Put any elements inside it and each becomes a slide: arrows, dots, a scrollbar, six transition effects, pinch-to-zoom and a thumbnail strip are all one attribute each. The library is loaded from swiperjs.com when the widget mounts.

Every flag must be spelled ="true"

The widget reads its configuration back off the DOM attributes and compares them to the string "true". So navigation="true" works and a bare navigation does not — it arrives as the empty string and reads as off. This is the opposite of every other widget in the library, where a bare boolean attribute means on. Tracked as #639; until it is fixed, write the value out.

Quick start

Slides are the widget's direct children — no wrapper class, no slot name. Add navigation="true" and pagination="true" for arrows and dots.

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
 
<cnc-carousel navigation="true" pagination="true">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</cnc-carousel>

Things to know

  • Flags are read as the string "true". A bare attribute is off; a binding that never reaches the DOM as an attribute is off too. This is the widget's biggest sharp edge — see the note at the top.
  • Nothing renders on the server. The slides are in the HTML but unstyled and unstacked until Swiper loads from the CDN and builds the carousel. Expect a moment where every slide is visible in a column.
  • Slides are mutated in place. The widget adds swiper-slide to each child, and under zoom it wraps each one in two new elements. Do not rely on the DOM shape you wrote surviving mount.
  • The configuration is read once. Changing an attribute after mount rebuilds nothing; the Swiper instance is created in mount() and kept in a closure, so it cannot be reached or reconfigured from the page either.
  • No autoplay. Swiper has one; this wrapper does not expose it. Nor does it expose breakpoints, free mode, vertical direction or lazy loading — the eleven properties above are the whole surface.

Usage guidance

Use a carousel where the content is genuinely a set of alternatives the reader browses — product photos, a gallery, a shelf of cards too wide for the page. Do not use one to stack things a reader needs to compare or is likely to miss; a carousel hides everything but one slide, and people rarely page past the first. cnc-carousel2 is the lighter alternative when you only need sliding, cnc-slides is the one for a deck of full-page slides, and cnc-scrollx gives a plain horizontal shelf with no library at all.

← Back to Widgets