📸 Pico Slider

A lightweight, reusable image slider for Pico.css — or standalone with no dependencies. Supports multiple sliders per page, autoplay, captions, indicators, and keyboard navigation.

🚀 Installation

npm install pico-slider

Or via CDN:

<!-- Pico.css version -->
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<link rel="stylesheet" href="https://unpkg.com/pico-slider/dist/slider.css">
<script src="https://unpkg.com/pico-slider/dist/slider.js"></script>

<!-- Standalone version -->
<link rel="stylesheet" href="https://unpkg.com/pico-slider/dist/slider.standalone.css">
<script src="https://unpkg.com/pico-slider/dist/slider.standalone.js"></script>

🛠 Usage

HTML Structure

<div class="pico-slider" tabindex="0">
  <div class="pico-slides">
    <img src="image1.jpg" alt="Slide 1" data-caption="First caption">
    <img src="image2.jpg" alt="Slide 2" data-caption="Second caption">
    <img src="image3.jpg" alt="Slide 3" data-caption="Third caption">
  </div>
</div>

JavaScript (ESM)

import PicoSlider from "pico-slider";
import "pico-slider/css";

new PicoSlider(document.querySelector(".pico-slider"), {
  autoplay: true,
  interval: 4000,
  keyboard: true,
  captions: true,
  indicators: true
});

Standalone (no Pico.css)

import PicoSlider from "pico-slider/standalone";
import "pico-slider/standalone/css";

new PicoSlider(document.querySelector(".pico-slider"), { autoplay: true });

⚙️ Options

| Option | Type | Default | Description | | -------------- | --------- | ------- | ------------------------------------------ | | autoplay | boolean | false | Automatically cycle through slides. | | interval | number | 3000 | Autoplay interval in ms. | | startIndex | number | 0 | Starting slide index. | | pauseOnHover | boolean | true | Pause autoplay on hover. | | keyboard | boolean | true | Enable arrow key navigation. | | indicators | boolean | true | Show navigation dots. | | captions | boolean | true | Show image captions (from data-caption). |

⌨️ API

const slider = new PicoSlider(container, options);

slider.next();      // Go to next slide
slider.prev();      // Go to previous slide
slider.goTo(2);     // Go to slide by index
slider.destroy();   // Remove slider instance

📂 Project Structure

pico-slider/
├── src/                     # Source files (edit these)
│   ├── slider.js
│   ├── slider.css           # Pico.css-based styles
│   └── slider.standalone.css# Standalone styles
├── dist/                    # Build output (published to npm)
│   ├── slider.js
│   ├── slider.esm.js
│   ├── slider.css
│   ├── slider.standalone.js
│   └── slider.standalone.css
├── demo/                    # Example demo page
│   └── index.html
├── index.d.ts               # TypeScript typings
├── rollup.config.js         # Build config
└── package.json

👩‍💻 Development

Clone the repo and build locally:

git clone https://github.com/instacks/pico-slider.git
cd pico-slider
npm install
npm run dev   # watch mode
npm run build # production build

🌐 Demo

👉 Live Demo on GitHub Pages

📜 License

MIT © Your Name