Pagiflow Demos & Examples
Items & Scroll
Control how many items are visible and how many are scrolled at once.
Gap
Control the spacing between slides in the slider track.
Height
Controls the total height of the slider track.
auto, but a fixed height is required for vertical sliders, fade transitions, and thumbnail layouts.
Center Mode
Keep the active slide centered with partial views of adjacent slides.
Animation Speed
Control the duration and toggle of slide transitions.
Transitions
Choose between classic sliding or sleek cross-fading.
Infinite Loop
Seamless wrapping for non-stop slide movement.
RTL Support
Full Right-to-Left direction support for internationalized layouts.
Vertical Direction
Switch the slider axis to scroll slides vertically instead of horizontally.
Autoplay & Playback
Automate slide transitions with configurable delays and pause behavior.
Pagination
Fine-tune dot pagination visibility and screen position.
Grid System
Multi-row and multi-column layouts for complex displays.
AutoScroll (Marquee)
Continuous, non-stop scrolling movement for logos or banners.
Thumbnails
Auto-generated thumbnail navigation for easy slide selection.
Slider Syncing
Connect two separate slider instances to move in tandem.
Lazy Loading
Load images only when they become visible in the viewport.
Methods Playground
Exhaustive testing of the programmatic API. Trigger actions on the instance below.
playgroundSlider> Waiting for input...
Event Hooks
Listen to internal state changes and react in your application.
Real-World Example
A production-ready implementation featuring high-resolution imagery, captions, and sleek interactions.
Configuration
Pagiflow('#demo-showcase', {
itemsPerSlide: 1,
centerMode: true,
centerPadding: '10%',
loop: true,
autoplay: true,
nav: true,
gap: 20
});