Content

Carousel

Slides you can swipe, scroll or step through with buttons. It uses the browser's own scroll snapping, so it feels native on phones.

One slide at a time

HTML

<div class="pw-carousel" data-pw-carousel aria-label="Places">
  <div class="pw-carousel-track">
    <div class="pw-slide"><img src="assets/img/dunes.svg" alt="Orange dunes under a low sun"></div>
    <div class="pw-slide"><img src="assets/img/fjord.svg" alt="Blue hills around a fjord"></div>
    <div class="pw-slide"><img src="assets/img/forest.svg" alt="Green hills"></div>
    <div class="pw-slide"><img src="assets/img/dusk.svg" alt="Purple hills at dusk"></div>
  </div>
</div>

Several cards, with a loop

--pw-per-view sets how many show. -md is for bars up to 900px wide, -sm up to 640px.

“Set up in a day.”Mara, bakery owner

“Our forms finally work on phones.”Idris, clinic manager

“I stopped fighting with plugins.”Jun, freelance developer

“Clear and small.”Elena, agency lead

“The docs answered everything.”Tomas, student

HTML

<div class="pw-carousel" data-pw-carousel data-loop aria-label="Customer stories" style="--pw-per-view: 3; --pw-per-view-md: 2; --pw-per-view-sm: 1">
  <div class="pw-carousel-track">
    <div class="pw-slide"><div class="demo-card"><b>“Set up in a day.”</b><span>Mara, bakery owner</span></div></div>
    <div class="pw-slide"><div class="demo-card"><b>“Our forms finally work on phones.”</b><span>Idris, clinic manager</span></div></div>
    <div class="pw-slide"><div class="demo-card"><b>“I stopped fighting with plugins.”</b><span>Jun, freelance developer</span></div></div>
    <div class="pw-slide"><div class="demo-card"><b>“Clear and small.”</b><span>Elena, agency lead</span></div></div>
    <div class="pw-slide"><div class="demo-card"><b>“The docs answered everything.”</b><span>Tomas, student</span></div></div>
  </div>
</div>

Autoplay

A slide show needs a stop button, so one is added. It also waits while the pointer or the focus is on it, and it does not start for people who ask for less motion.

Free shipping this weekOn every order

New: gift cardsFrom $10

Winter saleUp to 30% off

HTML

<div class="pw-carousel" data-pw-carousel data-autoplay="3500" data-loop aria-label="Offers" style="max-width:520px">
  <div class="pw-carousel-track">
    <div class="pw-slide"><div class="demo-card"><b>Free shipping this week</b><span>On every order</span></div></div>
    <div class="pw-slide"><div class="demo-card"><b>New: gift cards</b><span>From $10</span></div></div>
    <div class="pw-slide"><div class="demo-card"><b>Winter sale</b><span>Up to 30% off</span></div></div>
  </div>
</div>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-autoplay`		Milliseconds between slides.
`data-loop`		After the last slide comes the first.
`data-dots`	`true`	`false` hides the dots.
`data-arrows`	`true`	`false` hides the Previous and Next buttons.
`--pw-per-view`	`1`	CSS variable: slides visible at once. Also `--pw-per-view-md` and `--pw-per-view-sm`.
`--pw-gap`	`16px`	CSS variable: space between slides.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:change`	With `index` (first visible slide) and `page`.

From your script

var c = Partwise.get(carouselElement, 'carousel');
c.next(); c.prev(); c.go(2);
c.play(); c.pause();
c.page; c.pages;

Keyboard

Key	Action
`Right` `Left`	Next and previous
`Home` `End`	First and last
`Tab`	To the buttons and into the visible slides

Good to know

The example quotes above are invented sample text.
Slides that are scrolled out of view cannot be reached with Tab.
Give the carousel a name with aria-label.
The loop jumps back to the start. It is not an endless ribbon of copied slides.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/30-carousel.css, js/30-carousel.js.