v4.1.0 — MIT License

Pagiflow — Fast, zero-dependency slider.

A powerful JavaScript slider and carousel library. 40+ options. Infinite loop, fade, grid, thumbnails, auto-scroll, RTL, sync — everything out of the box. Works with JavaScript, React, Vue, Svelte, Solid, Angular, and Next.js.

Read the Docs →
Zero dependencies
MIT license
Fast and lightweight
ES5 compatible
app.js — JavaScript 
// 1. Include Pagiflow Styles in <head>
<link rel="stylesheet" href="path/to/pagiflow.css">
// 2. Include Pagiflow Script before </body>
<script src="path/to/pagiflow.js"></script>

const slider = Pagiflow('#mySlider', {
  loop: true,
  itemsPerSlide: 3,
  nav: true,
  autoplay: true
});

// Chainable methods
slider.goTo(2).play();
import { Pagiflow, PagiflowSlide } from 'pagiflow/react';
import 'pagiflow/css';

export default () => (
  <Pagiflow loop nav itemsPerSlide={3}>
    <PagiflowSlide>1</PagiflowSlide>
    <PagiflowSlide>2</PagiflowSlide>
    <PagiflowSlide>3</PagiflowSlide>
  </Pagiflow>
);
<template>
  <Pagiflow loop nav :itemsPerSlide="3">
    <PagiflowSlide>1</PagiflowSlide>
    <PagiflowSlide>2</PagiflowSlide>
  </Pagiflow>
</template>

<script setup>
import { Pagiflow, PagiflowSlide } from 'pagiflow/vue';
import 'pagiflow/css';
</script>
<script>
  import { Pagiflow } from 'pagiflow/svelte';
  import 'pagiflow/css';
</script>

<Pagiflow loop nav itemsPerSlide={3}>
  <div>Slide 1</div>
  <div>Slide 2</div>
</Pagiflow>
import { Pagiflow } from 'pagiflow/solid';
import 'pagiflow/css';

export default () => (
  <Pagiflow loop nav itemsPerSlide={3}>
    <div>Slide 1</div>
    <div>Slide 2</div>
  </Pagiflow>
);
import { Component } from '@angular/core';
import { PagiflowComponent, PagiflowSlideComponent } from 'pagiflow/angular';

@Component({
  standalone: true,
  imports: [PagiflowComponent, PagiflowSlideComponent],
  template: `
    <pf-pagiflow [options]="{ loop: true, nav: true }">
      <pf-slide>1</pf-slide>
      <pf-slide>2</pf-slide>
    </pf-pagiflow>
  `
})
export class SliderComponent {}
40+Configuration Options
12+API Methods
0Dependencies
48kbBundle Size
Framework Support

Works with your stack.

Pagiflow is framework-agnostic. Use it in any environment — plain HTML, React, Vue, or Angular. Pure JavaScript, no build config.

JavaScript JavaScript React React Vue.js Vue.js Angular Angular Svelte Svelte SolidJS Next.js Next.js
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: {...}}
Under the Hood

Engineered for perfection.

Built with modern web standards, prioritizing performance, accessibility, and developer experience.

Accessibility First

Fully implemented with aria-live regions, aria-hidden toggling for inactive slides, focus management, and complete keyboard navigation support.

100% SSR-Safe

No top-level window or document calls. Pagiflow is fully compatible and won't crash Next.js, Nuxt, or other server-rendered components.

Advanced Touch

Uses a custom swipe physics system via modern pointer/touch events for incredibly smooth, native-feeling dragging mechanics.

Bulletproof Edge Cases

Utilizes ResizeObserver for flawless responsive layouts and seamless jump logic for infinite loops — zero flashing when crossing clone boundaries.

Microscopic Bundle

All these features packed into just ~48kb minified, sitting at an incredibly light ~10.6kb gzipped. Maximum performance with zero bloat.

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
autoplay
itemsPerSlide
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 powerful, zero-dependency JavaScript slider and carousel library. It features horizontal and vertical sliding, infinite loop, fade transitions, grid mode, thumbnail strips, auto-scroll marquee, center mode, slider sync, and 40+ configuration options. Built for performance and accessibility.
Yes. Pagiflow provides official integrations for React, Vue, Svelte, Solid, and Angular, offering framework-native support such as Hooks, Composables, Actions, Primitives, and Signals.
Yes. Pagiflow is released under the MIT license, allowing free use, modification, and distribution in both personal and commercial projects.
Set loop: true in your options. Pagiflow duplicates slides internally to create a seamless infinite scrolling experience.
Yes. Pagiflow covers common Swiper features like loop, touch swipe, autoplay, pagination, responsive breakpoints, and fade mode while remaining lightweight and dependency-free.
Yes. Use rtl: true or add dir="rtl" to your container. Pagiflow automatically adjusts navigation and swipe behavior.
Yes. Use the sync option to link two sliders, such as a main gallery and thumbnail navigation.
Yes. Set direction: 'vertical' to create vertical sliders with automatic touch gesture handling.
Yes. Pagiflow supports keyboard navigation, ARIA attributes, and focus management for screen readers.
Pagiflow is extremely lightweight, optimized for fast loading and smooth animations, with zero external dependencies.
Yes. The autoScroll option creates continuous scrolling marquees for logos, news tickers, and banners.
Set itemsPerSlide to define visible slides. Combine with gap and responsive for fully responsive layouts.