Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/warp-slider-html.json

Usage

Define a section with class="slider" in your HTML file. Add a div with class="slide-info" inside the section to display the slide title and count.

<section class="slider">
  <div class="slide-info">
    <p id="slide-title"></p>
    <p id="slide-count"></p>
  </div>
</section>

In your script.js file, define your slides array with name and image URL.

const slides = [
  {
    name: "Slide 1",
    img: "/image-url",
  },
  {
    name: "Slide 2",
    img: "/image-url",
  },
];

Examples

Horizontal

Update the orientation property in the config object to "horizontal".

const config = {
  orientation: "horizontal",
  ...
};

Configuration

For the HTML version, config is present inside the script.js file instead of using data attributes.