Tutorial 14 · Components

Media — Carousel & Gallery

Image carousel with indicators and grid gallery.

10 minBeginnerlucUI 2 · v2.1.3

Objectives

Init .luc-carousel via lucUI.js.
Build gallery grid.

Steps

Carousel

carousel.html

<div class="luc-carousel">
  <div class="luc-carousel-inner">
    <div class="luc-carousel-item active">Slide 1</div>
  </div>
  <button class="luc-carousel-prev">‹</button><button class="luc-carousel-next">›</button>
</div>

Gallery

IMG

← Previous Next →