Name: Pagiflow
Rating: 4.9 (48 reviews)
Author: Pagiflow

NPM Installation

The recommended way to use Pagiflow in modern projects.

via NPM

npm i pagiflow

Then import it in your JavaScript file:

import Pagiflow from 'pagiflow';
import 'pagiflow/css';

const slider = Pagiflow('#mySlider');

Manual Installation

Include the Pagiflow script locally. No dependencies needed.

Local Files

// 1. Include Pagiflow Styles in <head>
<link rel="stylesheet" href="path/to/pagiflow.min.css">

// 2. Include Pagiflow Script before </body>
<script src="path/to/pagiflow.min.js"></script>

// 3. Initialize
<script>
  const slider = Pagiflow('#mySlider');
</script>

Download assets

Need to self-host or bundle Pagiflow locally? Access all library files, minified bundles, and source code from the jsDelivr CDN package. Visit jsDelivr Pagiflow to download the latest version and integrate it into your project.

CDN

The fastest way to use Pagiflow. Just copy these links into your HTML <head> and <body>.

jsDelivr CDN

<!-- 1. CSS (Place in <head>) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pagiflow@4/dist/pagiflow.min.css">

<!-- 2. JS (Place before </body>) -->
<script src="https://cdn.jsdelivr.net/npm/pagiflow@4/dist/pagiflow.min.js"></script>

Basic Usage

Get up and running with a simple slider in seconds.

1. HTML Structure

Create a container element. Each direct child will automatically become a slide.

<div id="mySlider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

2. Initialization

Initialize Pagiflow by passing a CSS selector and an optional settings object.

const slider = Pagiflow('#mySlider', {
  loop: true,           // Enable infinite loop
  nav: true,            // Show prev/next arrows
  itemsPerSlide: 1,     // Number of slides to show
  speed: 400            // Transition speed in ms
});

Framework Integration

Pagiflow is plugin-first and framework-agnostic, with ready-to-use integration patterns for major frameworks below.

JavaScript React Vue.js Svelte SolidJS Angular

Slider Direction

Control the scrolling axis of the slider with horizontal or vertical layouts for different content presentation styles.

Option	Type	Default	Description
direction	string	'horizontal'	Scroll direction. `'horizontal'` or `'vertical'`.

Horizontal Scrolling direction: 'horizontal'

Demo

const slider = Pagiflow('#mySlider', {
  direction: 'horizontal'
});

Vertical Scrolling direction: 'vertical'

Demo

const slider = Pagiflow('#mySlider', {
  direction: 'vertical',
  height: 300 // required for vertical mode 
});

Slide Layout & Navigation

Configure how many slides appear at once, how many move per interaction, and which slide is active initially.

Option	Type	Default	Description
itemsPerSlide	number	1	Number of visible slides at once.
slidesToScroll	number	1	Steps to advance on next/prev.
startIndex	number	0	Initial active slide index (zero-based).

Multiple Visible Slides itemsPerSlide: 3

Demo

const slider = Pagiflow('#mySlider', {
  itemsPerSlide: 3,
  slidesToScroll: 1,
  startIndex: 0
});

Spacing & Height

Adjust slide spacing and viewport height to create flexible layouts and better visual balance across slider modes.

Option	Type	Default	Description
gap	number	8	Gap between slides in pixels.
height	string\|number	'30vh'	Viewport height. E.g. `300`, `'300px'`, `'50vh'`. Used for vertical direction and fade mode.

Slide Gap Spacing gap: 20

Demo

const slider = Pagiflow('#mySlider', {
  gap: 20,
});

Custom Slider Height height: 120

Demo

const slider = Pagiflow('#mySlider', {
  height: 120,
});

Loop & Transitions

Configure infinite looping, transition speed, animation behavior, and fade effects for smooth slider navigation.

Option	Type	Default	Description
loop	boolean	false	Infinite scroll loop. Adds clones at each end.
speed	number	400	Transition duration in milliseconds.
animate	boolean	true	Enable/disable transition animation.
fade	boolean	false	Enable fade transition. Requires `itemsPerSlide: 1` and horizontal direction.

Infinite loop loop: true

Demo

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

Transition Speed speed: 400

Demo

const slider = Pagiflow('#mySlider', {
  speed: 400
});

Animation Control animate: false

Demo

const slider = Pagiflow('#mySlider', {
  animate: false
});

Fade Transition fade: true

Demo

const slider = Pagiflow('#mySlider', {
  fade: true,
  height: 200, // height is required for fade mode
});

Navigation Controls

Add built-in or custom navigation buttons with configurable icons, positioning, and external control support.

Option	Type	Default	Description
nav	boolean	false	Show built-in prev/next buttons.
navDisabledEnd	boolean	false	Disable buttons at start/end instead of hiding.
navigation	object	null	Custom external buttons: `{ prev: '.prev', next: '.next' }`.
prevIcon	string	'‹'	HTML/text for the prev button.
nextIcon	string	'›'	HTML/text for the next button.
prevPosition	string\|object	null	Position string (e.g. `'center-left'`) or `{ top:'50%', left:10 }`.
nextPosition	string\|object	null	Same as prevPosition for the next button.

Built-in Navigation

Demo

const slider = Pagiflow('#mySlider', {
  nav: true,
  nextIcon: '←',
  prevIcon: '→',
});

External Navigation Buttons

Pagination Dots

Display interactive pagination dots with flexible positioning options for quick and intuitive slide navigation.

Option	Type	Default	Description
paginate	boolean	false	Show pagination dots.
paginationPosition	string\|object	null	Custom position, e.g. `'bottom-center'` or `{ bottom:10, left:'50%' }`.

Dot Pagination paginate: true

Demo

const slider = Pagiflow('#mySlider', {
  paginate: true,
  paginationPosition: 'bottom-center' // or { bottom:10, left:'50%' } yon can use any top, bottom, left, right position values
});

Autoplay Controls

Automatically cycle through slides with customizable delay and hover pause behavior for smoother user interaction.

Option	Type	Default	Description
autoplay	boolean	false	Enable autoplay.
autoplayDelay	number	3000	Delay between slides in ms.
pauseOnHover	boolean	true	Pause autoplay when mouse is over slider.

Autoplay Playback autoplay: true, autoplayDelay: 2000, pauseOnHover: true

Demo

const slider = Pagiflow('#mySlider', {
  autoplay: true,
  autoplayDelay: 2000,
  pauseOnHover: true
});

Auto Scroll

Create smooth continuous marquee-style scrolling with configurable speed and direction — ideal for logo carousels, tickers, and endless sliders.

Option	Type	Default	Description
autoScroll	boolean	false	Enable continuous auto-scroll mode.
autoScrollSpeed	number	0.5	Pixels per frame scroll speed.
autoScrollDirection	string	'left'	`'left'` or `'right'`.

Continuous Ticker Scroll autoScroll: true

Demo

const slider = Pagiflow('#mySlider', {
  autoScroll: true,
  autoScrollSpeed: 0.5,
  autoScrollDirection: 'left',
});

Grid Layout

Organize slides into responsive multi-column grid layouts with support for paginated rows and automatic grid filling.

Option	Type	Default	Description
grid	boolean	false	Enable grid mode.
gridColumns	number	2	Number of columns in the grid.
itemsPerSlide	number	1	Total items per slide page (rows × columns).
gridFill	boolean	false	Fill incomplete last page with recycled items.

Multi-Column Grid grid: true, gridColumns: 2

Demo

const slider = Pagiflow('#mySlider', {
  loop: true,
  grid: true,
  gridColumns: 2,
  itemsPerSlide: 4, // 2 rows × 2 cols
  gridFill: true // fill last page if items < 4
});

Thumbnail Navigation

Show thumbnail strip that syncs with the main slider. Supports top, bottom, left, and right positions.

Option	Type	Default	Description
thumbnails.enabled	boolean	false	Enable thumbnails.
thumbnails.position	string	'bottom'	`'top'`, `'bottom'`, `'left'`, `'right'`.
thumbnails.thumbWidth	number\|string	80	Width of each thumbnail.
thumbnails.gap	number	5	Gap between thumbnails.
thumbnails.sidebarHeight	string\|number	null	Height for left/right sidebar mode.

Thumbnails bottom thumbnails.enabled: true

Demo

const slider = Pagiflow('#mySlider', {
  height: 200, // height is required for thumbnail mode
  thumbnails: {
    enabled: true,
    position: 'bottom',
    thumbWidth: 90,
    gap: 6
  }
});

Center Mode

Highlight the active slide in the center while partially revealing adjacent slides for a modern carousel experience.

Option	Type	Default	Description
centerMode	boolean	false	Enable center mode.
centerPadding	number\|string	0	Side padding showing adjacent slides. E.g. `60` or `'60px'`.

Centered Active Slide centerMode: true, centerPadding: 60

Demo

const slider = Pagiflow('#mySlider', {
  centerMode: true,
  centerPadding: 60
});

Slider Sync

Connect two slider instances together for synchronized navigation, ideal for galleries, thumbnail previews, and dual-slider layouts.

Option	Type	Default	Description
sync	string\|instance	null	CSS selector or Pagiflow instance to sync with.

How it works: Both sliders are linked bidirectionally. Swipe or navigate one and the other follows. Great for thumbnail + main slider combos.

Synchronized Sliders sync: '#nav-slider'

Demo

// Main slider  
const main = new Pagiflow('#main-slider', {
  itemsPerSlide: 1,
  loop: true,
});

// Nav slider (linked back)  
const nav = new Pagiflow('#nav-slider', {
  itemsPerSlide: 3,
  loop: true,
  sync: '#main-slider'
});

RTL Support

Enable right-to-left slider behavior for Arabic, Hebrew, Persian, and other RTL language interfaces with reversed navigation and swiping.

Option	Type	Default	Description
rtl	boolean	false	Right-to-left direction. Reverses swipe and translation.

Right-to-Left Slider rtl: true

Demo

const slider = Pagiflow('#mySlider', {
  rtl: true
});

Keyboard Navigation

Control slider navigation using keyboard shortcuts including arrow keys, Home, and End for improved accessibility and usability.

Option	Type	Default	Description
keyboard	boolean	false	Enable keyboard ←→ (horizontal) or ↑↓ (vertical) navigation. Home/End jump to first/last.

Keyboard Controls keyboard: true

Try it: Click the slider below then press ← → arrow keys or Home/End.

const slider = Pagiflow('#mySlider', {
keyboard: true,
nav: true,
});

Lazy Loading

Improve performance by loading slide images only when they enter the viewport using IntersectionObserver-based lazy loading.

Option	Type	Default	Description
lazyLoad	boolean	false	Enable lazy loading. Images are replaced with shimmer until visible.

Deferred Image Loading lazyLoad: true

const slider = Pagiflow('#mySlider', {
lazyLoad: true,
nav: true,
});

Responsive Breakpoints

Customize slider behavior across different screen sizes by overriding options at specific responsive breakpoints.

Option	Type	Default	Description
responsive	object	{}	Map of breakpoint → options. Applied when `window.innerWidth >= breakpoint`.

Adaptive Responsive Layout

const slider = Pagiflow('#mySlider', {
  nav: true,
  paginate: true,
  responsive: {
    0: { itemsPerSlide: 1, gap: 0 },
    576: { itemsPerSlide: 2, gap: 12 },
    768: { itemsPerSlide: 3, gap: 16 },
    1200: { itemsPerSlide: 4, gap: 20, autoplay: true }
  }
});

Note: Responsive options are deeply merged and re-evaluated on window resize (debounced 120ms).

Methods

All methods return this (chainable) unless noted otherwise.

Live method playground

01

02

03

04

05

→ output will appear here

.next()

Go to the next slide. Respects slidesToScroll and loop. No-ops if already at end without loop.

→ returns this (chainable)

.prev()

Go to the previous slide.

→ returns this (chainable)

.goTo(index, options?)

Jump to slide by zero-based index. Options: { silent: false, instant: false }. silent skips rendering; instant skips animation.

→ returns this

.play()

Resume autoplay. Sets autoplay: true and starts the timer.

→ returns this

.pause()

Pause autoplay or autoScroll animation frame.

→ returns this

.resume()

Resume from paused state. Works for both autoplay and autoScroll.

→ returns this

.togglePlayPause()

Toggle between play and pause.

→ returns this

.setOptions(newOptions, forceRebuild?)

Update options at runtime. Automatically rebuilds if structural options change (itemsPerSlide, gap, fade, etc.).

→ returns this

.onSlideChange(callback)

Register a callback for slide change events. Callback receives the active index.

→ returns this

.html(content?)

Get or set slide HTML. Pass string/array to replace all slides and rebuild. Pass 'dom' to get DOM nodes. No args returns HTML string.

→ string | Node[] | this

.reInit(newOptions?)

Completely reinitialize the slider, optionally with new options. Rebuilds DOM container and re-binds all events.

→ returns this

.destroy()

Tear down the slider completely. Removes container DOM, unbinds all events, cancels timers and RAFs. Shows a loading spinner on the element.

→ void

.onSlideChange(callback)

Set a callback function that fires whenever the active slide changes. Receives the zero-based real index.

→ returns this

Instance Properties

Access slider state directly via the instance object.

Property	Type	Description
.index	number	Current active slide index (includes clones in loop mode). Use `._getRealIndex()` for original item index.
.slides	Node[]	Array of all slide DOM elements (including clones).
.originalItems	Node[]	Clones of the original input DOM elements.
.wrapper	Element	The generated `.pagiflow-wrapper` container element.
.slider	Element	The internal tracks/slider element.
.destroyed	boolean	True if the instance has been destroyed.

Chaining example

const slider = Pagiflow('#mySlider', {
loop: true,
});
// Methods are chainable
slider.goTo(2)
  .setOptions({ autoplay: true, autoplayDelay: 2000 }).play();
// After 5 seconds, pause
setTimeout(() => slider.pause(), 5000);

Events

Hook into slider lifecycle with the onSlideChange callback.

onSlideChange callback

01

02

03

→ navigate the slider to see events

const slider = Pagiflow('#mySlider', {
loop: true,
nav: true,
});
slider.onSlideChange((index) => {
  console.log(`Active slide: ${index}`);
});
// index is zero-based real index

All Options Reference

Complete list of all configuration options with types and defaults.

Option	Type	Default	Description
direction	string	'horizontal'	Slide axis: `'horizontal'` or `'vertical'`.
itemsPerSlide	number	1	Visible slides at once.
slidesToScroll	number	1	Steps per navigation click.
gap	number	8	Pixels between slides.
height	string\|number	auto	Viewport height (Required when using vertical, fade, or thumbnails mode.).
startIndex	number	0	Initial slide index.
loop	boolean	false	Infinite loop with DOM clones.
speed	number	400	Transition duration (ms).
animate	boolean	true	Enable CSS transitions.
fade	boolean	false	Crossfade instead of slide.
nav	boolean	false	Show built-in prev/next buttons.
navDisabledEnd	boolean	false	Disable (not hide) buttons at ends.
navigation	object	null	External buttons `{ prev, next }`.
prevIcon	string	'‹'	Prev button HTML.
nextIcon	string	'›'	Next button HTML.
prevPosition	string\|obj	null	Absolute position for prev button.
nextPosition	string\|obj	null	Absolute position for next button.
paginate	boolean	false	Show pagination dots.
paginationPosition	string\|obj	null	Custom pagination position.
autoplay	boolean	false	Auto-advance slides.
autoplayDelay	number	3000	Delay between auto advances (ms).
pauseOnHover	boolean	true	Pause autoplay on hover.
autoScroll	boolean	false	Continuous marquee scrolling.
autoScrollSpeed	number	0.5	Pixels per animation frame.
autoScrollDirection	string	'left'	`'left'` or `'right'`.
swipeThreshold	number	60	Min swipe distance to trigger change.
grid	boolean	false	Enable grid mode per slide.
gridColumns	number	2	Grid column count.
gridFill	boolean	false	Fill last page with recycled items.
thumbnails.enabled	boolean	false	Show thumbnail strip.
thumbnails.position	string	'bottom'	top / bottom / left / right.
thumbnails.thumbWidth	number	80	Thumbnail width in px.
thumbnails.gap	number	5	Gap between thumbnails.
thumbnails.sidebarHeight	string	null	Sidebar height for left/right mode.
centerMode	boolean	false	Center active slide with peeking neighbors.
centerPadding	number\|string	0	Side padding for center mode.
rtl	boolean	false	Right-to-left mode.
keyboard	boolean	false	Arrow key navigation.
lazyLoad	boolean	false	IntersectionObserver image lazy load.
sync	string\|inst	null	Selector or instance to sync with.
responsive	object	{}	Breakpoint → options map.
html	str\|arr	null	Inject initial slide HTML content during initialization.

Frequently Asked Questions

Common questions about installing, configuring, and using Pagiflow.

How do I install Pagiflow without npm? +

Download pagiflow.js from GitHub and add it with a single script tag — no build step, no npm, no bundler required. Add <script src="pagiflow.js"></script> before your closing </body> tag, then call Pagiflow('#mySlider', { nav: true }). That's the complete setup.

Does Pagiflow work with React or Vue? +

Yes. Pagiflow provides official integrations for React, Vue, Svelte, Solid, and Angular. You can import them directly from pagiflow/react, pagiflow/vue, etc. The plain JS API also works cleanly in any environment if you prefer a manual setup.

How do I make the slider autoplay and pause on hover? +

Set autoplay: true and pauseOnHover: true in your options. Control the speed with autoplayDelay (default: 3000ms). For example: Pagiflow('#slider', { autoplay: true, autoplayDelay: 2500, pauseOnHover: true, loop: true }). You can also use the .play() and .pause() API methods to control autoplay programmatically.

How do I make a responsive carousel that shows different numbers of slides on mobile and desktop? +

Use the responsive option with breakpoint keys. Each key overrides any option at that viewport width. Example: Pagiflow('#slider', { itemsPerSlide: 1, responsive: { 576: { itemsPerSlide: 2 }, 992: { itemsPerSlide: 3, gap: 20 } } }). Options deep-merge, so you only need to specify values that change at each breakpoint. The slider re-evaluates on window resize with a 120ms debounce.

How do I create a continuous auto-scrolling ticker / marquee with Pagiflow? +

Use the autoScroll mode:

Pagiflow('#ticker', { autoScroll: true, autoScrollSpeed: 1, autoScrollDirection: 'left', pauseOnHover: true, itemsPerSlide: 3, gap: 20 })

. This uses requestAnimationFrame for buttery-smooth continuous scrolling — ideal for logo strips, partner banners, and news tickers. autoScrollSpeed is in pixels per frame.

How do I destroy a Pagiflow instance and re-initialize it? +

Call slider.destroy() to cleanly remove all event listeners, DOM clones, and injected styles. The HTML will be restored to its original pre-init state. To re-initialize with different options, call Pagiflow('#slider', newOptions) after destroying. Alternatively, use slider.reInit() to destroy and reconstruct the same instance in-place, or slider.setOptions({ gap: 30 }) to update options at runtime without reinitializing.

Performance & Accessibility

Pagiflow is built with a "Performance First" philosophy and adheres to modern accessibility standards.

High Performance

Zero Dependencies: No extra weight from external libraries.
requestAnimationFrame: Butter-smooth animations and auto-scrolling.
GPU Accelerated: Uses translate3d for hardware acceleration.
Performance Optimized: Built for fast loading and smooth interaction.

Accessibility (A11y)

ARIA Roles: Fully compliant ARIA attributes for screen readers.
Keyboard Control: Full support for arrows, Home, and End keys.
Focus Management: Active slides are focusable; hidden ones are not (via inert).
Semantic HTML: Uses correct HTML elements for navigation and slides.

PagiflowDocumentation

NPM Installation

Manual Installation

Download assets

CDN

Basic Usage

Framework Integration

Slider Direction

Slide Layout & Navigation

Spacing & Height

Loop & Transitions

Navigation Controls

Pagination Dots

Autoplay Controls

Auto Scroll

Grid Layout

Thumbnail Navigation

Center Mode

Slider Sync

RTL Support

Keyboard Navigation

Lazy Loading

Responsive Breakpoints

Methods

Instance Properties

Chaining example

Events

All Options Reference

Frequently Asked Questions

Performance & Accessibility

Pagiflow
Documentation