← Back to index

carousel

Slide-based content rotator with prev/next, dots, optional autoplay and loop. Five variants below cover the full surface.

Default

Four slides, no autoplay, no loop. Prev is disabled at slide 0; next is disabled at the last slide.

Slide 1

The first slide. Prev should be disabled here.

Slide 2

The second slide.

Slide 3

The third slide.

Slide 4

The last slide. Next should be disabled here.

<div class="brut-carousel" data-brut="carousel" data-current="0">
  <div class="brut-carousel__viewport">
    <div class="brut-carousel__track">
      <div class="brut-carousel__slide">Slide 1</div>
      <div class="brut-carousel__slide">Slide 2</div>
      <div class="brut-carousel__slide">Slide 3</div>
      <div class="brut-carousel__slide">Slide 4</div>
    </div>
  </div>
  <div class="brut-carousel__nav">
    <button class="brut-carousel__btn brut-carousel__btn--prev" aria-label="Previous slide"></button>
    <button class="brut-carousel__btn brut-carousel__btn--next" aria-label="Next slide"></button>
  </div>
  <div class="brut-carousel__dots" role="tablist"></div>
</div>

With loop

Same four slides, but with data-loop. Prev/next wrap around the ends instead of clamping.

Slide 1

Press prev to wrap to slide 4.

Slide 2

The second slide.

Slide 3

The third slide.

Slide 4

Press next to wrap to slide 1.

With autoplay

Set data-autoplay="3000" (ms) plus data-loop — the track advances every three seconds and pauses on hover or focus.

Slide 1

Hover to pause.

Slide 2

Focus a button to pause.

Slide 3

Move away to resume.

Slide 4

Loops back to slide 1.

<div class="brut-carousel" data-brut="carousel" data-autoplay="3000" data-loop>
  ...
</div>

Image content

Slides are content-agnostic — here each one wraps a .brut-aspect--video placeholder. Any markup may live inside .brut-carousel__slide.

Image one

Primary tile.

Image two

Lime tile.

Image three

Pink tile.

Single slide

One slide only. Confirms the component degrades gracefully — nav buttons disable themselves and the page does not throw.

Only slide

Nothing to navigate to.