Pagiflow is a high-performance, lightweight, and extremely versatile slider library. It is engineered for modern web applications that prioritize speed, responsiveness, and advanced UI features without the overhead of heavy dependencies.
- Why Pagiflow?
- Key Features
- Installation
- React
- Quick Start
- Developer Guide
- Browser Support
- Useful Links
- Contributing
- License
In an era where web performance is critical for SEO and user experience, Pagiflow stands out by being dependency-free. While libraries like Swiper are powerful, they can be overkill for performance-sensitive projects. Pagiflow provides:
- SEO Benefits: Fast load times improve Core Web Vitals.
- AI-Ready Documentation: Structured for easy parsing by AI search engines.
- Modern Tech: Built with ES6+ classes and hardware-accelerated CSS.
- ✅ Dependency-Free: Pure vanilla JS. No jQuery or extra libraries required.
- ✅ Ultra Lightweight: Small footprint (~40KB minified) for lightning-fast load times.
- ✅ Fully Responsive: Granular control over behavior at every breakpoint.
- ✅ Advanced Layouts: Supports horizontal, vertical, grid, and fade modes.
- ✅ Rich Interaction: Touch/swipe support, keyboard navigation, and synced thumbnails.
- ✅ Lazy Loading: Intelligent asset loading for optimized performance.
Add these directly to your HTML's <head> and before </body>:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/pagiflow/pagiflow@v1.0.0/dist/css/pagiflow.min.css"
/>
<script src="https://cdn.jsdelivr.net/gh/pagiflow/pagiflow@v1.0.0/dist/js/pagiflow.min.js"></script>Download the optimized files from the dist/ folder:
<link rel="stylesheet" href="dist/css/pagiflow.min.css" />
<script src="dist/js/pagiflow.min.js"></script>Minimum required HTML for a basic slider:
<div id="mySlider">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>Initialize with just a few lines of code:
Pagiflow("#mySlider", {
itemsPerSlide: 1,
nav: true,
autoplay: true,
autoplayDelay: 4000,
loop: true,
});Pagiflow is built with a modular class-based approach, ensuring it is easy to extend and debug:
- Factory Function (
Pagiflow): Entry point for easy initialization. - Adapter Layer: Framework adapters can wrap the same runtime instead of duplicating slider logic.
- Responsive System: Dynamically merges settings on window resize using a debounced listener.
- Hardware Acceleration: Uses
transform: translate3dto offload rendering to the GPU. - Memory Efficient: Optimized DOM manipulation only clones necessary nodes.
- Fluid Animation: Uses
requestAnimationFramefor high-frequency updates.
 Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
We welcome contributions! Please see our Contributing Guide for details on how to get involved.
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ for the performance-first web.