<flex-slider>

Live

This page is the demo

Everything below is the real component, running on this page. It is not a screenshot, an iframe or a video — the same file the install command fetches. Hover the slider to pause it; 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" height="380px">
  <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 on this page, 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 beside it, 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

These two sliders below are driven by CSS custom properties and shadow parts from this page's own stylesheet. The component's internals are untouched — that is the whole 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; }
#theme-square::part(pager) { gap: 10px; }

Live updates

Add an image, the slider adapts

The component watches its own children. Appending an image adds a slide, removes nothing, and leaves the current position alone — no re-init call needed. Use the button to grow the gallery.

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;

// properties
slider.currentIndex;      // get and set
slider.slides;            // the original <img> elements

// events — both 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

# or clone the repo and copy it in
git clone https://github.com/squidjam/FlexSlider.git

References

Where to go next

Everything this page demonstrates is written up, testable, or readable in source. The component is small enough to hold in your head — about 600 lines, no dependencies.

• README Configuration, API, theming, browser support, and the full migration table from FlexSlider 2.
• Test suite Runs in your browser against real layout and real events. Prints a pass/fail summary 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.
• CONTRIBUTING.md House rules, how to run things locally, and what is deliberately out of scope.
• GitHub repository Issues, releases and history.
• FlexSlider 2 (original) The jQuery plugin this is derived from, © 2012 WooThemes, contributing author Tyler Smith.