v1.0.0 — MIT License

Pagiflow — Fast, zero-dependency slider.

Pagiflow is a powerful, zero-dependency vanilla JavaScript slider and carousel library. 30+ options. Infinite loop, fade, grid, thumbnails, auto-scroll, RTL, sync — everything out of the box. No jQuery. No build step.

Read the Docs → Download ★ GitHub
Zero dependencies
MIT license
40KB minified
ES5 compatible
app.js 
// 1. Include the script
// <script src="pagiflow.min.js"></script>
// 2. Initialize — that's it.
const slider = Pagiflow('#mySlider', {
  loop:        true,
  nav:         true,
  paginate:    true,
  autoplay:    true,
  autoplayDelay: 3000,
  // Responsive breakpoints
  responsive: {
  0:    { itemsPerSlide: 1 },
  768:  { itemsPerSlide: 2 },
  1200: { itemsPerSlide: 3 }
  }
});
// Methods are chainable
slider.goTo(2).play();
30+Configuration Options
12+API Methods
0Dependencies
40KBMinified Size
Features

Everything you need,
nothing you don't.

Every major slider feature built-in. No plugins, no add-ons, no bloat.

Infinite Loop
Seamless wrapping using DOM clone technique. No visual jump, no gap. Works with multiple items per view.
loop: true
Fade Transition
Crossfade between slides instead of sliding. Configurable speed. Combines with loop and autoplay.
fade: true
Grid Layout
Display items in a CSS grid per slide page. Choose columns and rows. Like paginated masonry.
grid: true
Thumbnails
Auto-generated thumbnail strip at top, bottom, left, or right. Syncs with main slider automatically.
thumbnails.enabled: true
Auto-Scroll
Continuous marquee/ticker scrolling using requestAnimationFrame. Perfect for logo strips and partner bands.
autoScroll: true
RTL Support
Full right-to-left direction for Arabic, Hebrew, and other RTL languages. Reverses swipe and translation.
rtl: true
Slider Sync
Link two slider instances bidirectionally. Navigate one and the other follows. Great for main + thumbnail combos.
sync: '#other'
Center Mode
Keep the active slide centered with adjacent slides peeking in from both sides. Fully configurable padding.
centerMode: true
Responsive Breakpoints
Override any option at any breakpoint. Deep merge. Re-evaluated on resize with 120ms debounce.
responsive: {768: {...}}
Live Demo

See it in action.

Toggle options in real time and see the slider update instantly.

Slide 01
Slide 02
Slide 03
Slide 04
Slide 05
→ onSlideChange: slide 0
Options
loop
fade
autoplay
itemsPerSlide
direction
Methods
Quick Start

Up and running
in 3 steps.

No build tools, no configuration files, no framework lock-in. Just include and go.

01
Include the script
Add the Pagiflow JS file to your page. No CSS file required — the library handles its own layout via CSS custom properties.
<script src="pagiflow.js"></script>
02
Write your HTML
Create a container with your slide items inside. Any HTML content works — images, cards, text, or mixed media.
<div id="slider"><div>...</div></div>
03
Initialize
Call Pagiflow with your selector and options. Every option has a sensible default — you only configure what you need.
Pagiflow('#slider', { nav: true });

Compare libraries.

Pagiflow vs Swiper, Slick, Splide & more. See a detailed feature-by-feature comparison with every major JavaScript slider library.

See Comparison →
FAQ

Common questions.

Pagiflow is a zero-dependency vanilla JavaScript slider and carousel library. It supports horizontal and vertical sliding, infinite loop, fade transitions, grid layout, thumbnail strips, auto-scroll marquee mode, center mode, slider sync, RTL, keyboard navigation, lazy image loading, and responsive breakpoints. It works in all modern browsers without jQuery or any other framework.
No. Pagiflow has absolutely zero dependencies. It is written in pure vanilla JavaScript (ES5-compatible) and can be used in any project — plain HTML sites, WordPress themes, React apps, Vue projects, or any other environment — without installing anything else.
Yes. Pagiflow is released under the MIT license, which allows free use, modification, and distribution in both personal and commercial projects. No attribution required, no royalties, no restrictions.
Set loop: true in your options. Pagiflow uses the DOM clone technique — it silently prepends and appends copies of your slides, creating seamless infinite scrolling without any visual jump. It works with all other options: multiple items per view, autoplay, touch swipe, and fade.
Yes. Pagiflow covers the most common Swiper use cases — infinite loop, touch swipe, autoplay, pagination, responsive breakpoints, fade mode — with zero dependencies and no separate CSS import required. If you need Swiper's more niche modules (3D effects, virtual slides), Swiper may still be the better fit. See our detailed comparison for a full breakdown.
Set itemsPerSlide to the number of visible slides you want. Combined with gap for spacing and responsive for breakpoints, you can build fully responsive carousels that show 1 slide on mobile, 2 on tablet, and 3+ on desktop. Example: Pagiflow('#s', { itemsPerSlide: 3, gap: 16, responsive: { 0: { itemsPerSlide: 1 }, 768: { itemsPerSlide: 2 } } })