<flex-slider>

Live

This page is the demo

The slider below is the real component running here — not a screenshot and not an iframe. Hover it to pause; drag it on a touch device.

That is the whole markup — one import, then plain images:

<!-- one import; the component is a single file -->
<script type="module" src="flex-slider.js"></script>

<!-- plain images are the whole API -->
<flex-slider animation="slide" nav pager autoplay
             interval="4500" pause-on-hover theme="dark">
  <img src="slide-1.jpg" alt="First slide">
  <img src="slide-2.jpg" alt="Second slide">
  <img src="slide-3.jpg" alt="Third slide">
</flex-slider>

Variants

One element, every mode

Three independent instances, each configured by attributes alone. They share no state — paging one leaves the others where they were.

Scripting

Methods, properties and events

The element is the API. Every button drives the slider, and each slide-start and slide-end is written to the panel underneath — the same events you would listen for in your own page.

listening for slide-start…

Theming

Restyled without touching the component

Both sliders are driven by CSS custom properties and shadow parts from this page's own stylesheet. The component's internals are untouched — that is the point of the shadow boundary.

/* custom properties, set on the host */
#theme-warm {
  --fs-accent: #ff9f45;
  --fs-arrow-bg: rgba(255, 159, 69, .92);
  --fs-arrow-fg: #201603;
  --fs-dot: rgba(255, 159, 69, .45);
  --fs-dot-active: #ff9f45;
  --fs-radius: 16px;
}

/* or reach inside by shadow part */
#theme-square::part(arrow-prev),
#theme-square::part(arrow-next) { border-radius: 6px; width: 46px; height: 46px; }

Live updates

Add an image, the slider adapts

The component watches its own children. Appending an image adds a slide and leaves the current position alone — no re-init call needed.

Reference

Attributes

Methods & events

// methods
slider.next();            slider.prev();
slider.goTo(2);           slider.play();
slider.pause();           slider.refresh();   // re-read the images
slider.reset();           slider.currentIndex = 0;

// events — carry { index, slide, count }, and cross the shadow boundary
slider.addEventListener('slide-start', (e) => console.log(e.detail.index));
slider.addEventListener('slide-end',   (e) => console.log(e.detail.slide));

Install

# one file, no dependencies
curl -O https://squidjam.github.io/FlexSlider/flex-slider.js

References

Where to go next

• Full demo page The long-form tour: every attribute, RTL, smooth-height, more theming.
• README Configuration, API, theming, browser support, and the migration table from FlexSlider 2.
• Test suite Runs in your browser against real layout and real events, and reports on window.__flexSliderTests.
• flex-slider.js The whole component: markup, styles and behaviour in one ES module.
• LICENSE.md GPL-2.0-or-later — the same licence as the FlexSlider 2 work this derives from.
• GitHub repository Issues, releases and history.