FloSlide

A client-side content carousel library. Vanilla ES6 JS, lightweight, ADA compliant, and responsive.

View on GitHub

⚡ Lightweight

Minimal footprint with tree-shaking support for modern bundlers

📱 Touch Optimized

Swipe fluidly on mobile devices with smooth touch gestures and native-like scrolling experience

♿ ADA Compliant

Built with accessibility in mind, supporting keyboard navigation and screen readers

📱 Responsive

Automatically adapts to different screen sizes and touch devices

🔧 Flexible Configuration

Customize UI nav options like arrows, dots, and scrollbar per breakpoint

🎯 Zero Dependencies

Pure JavaScript implementation, no external dependencies required

🚀 Installation

Install via NPM

Coming soon!

From Repo (Un-minified)

For development.

  1. Clone repo to local.
  2. Copy all contents of flo-slide/src/ to your project.
  3. Done! Import into your larger JS codebase.

From Repo (Minified)

For production deployments.

  1. Clone repo to local.
  2. In CLI navigate to flo-slide/ folder.
  3. Run npm install.
  4. Run npm run build.
  5. Done! Copy dist/flo-slide.min.js to your project.

Confirm Installation

  1. Confirm window.FloSlide is available on the page in dev tools console.
  2. Insure css from ./dist/styles.css is also loaded on the page

Basic Usage

Basic carousel with default settings:

1

2

3

4

5

6

Code Example

// Basic usage
FloSlide('.js-my-basic-carousel');

"Kitchen Sink" Usage

Basic carousel with default settings:

1

2

3

4

5

6

7

8

9

10

11

12

Code Example


FloSlide('.js-my-fancy-carousel', {
  slidesToShow: 1.25,
  slidesToScroll: 2,
  arrows: false,
  dots: false,
  scrollbar: true,
  clickDrag: true,
  customArrows: '',
  responsive: {
    600: {
      slidesToShow: 2.25,
      slidesToScroll: 2,
      scrollbar: false,
      dots: true
    },
    1028: {
      slidesToShow: 4,
      slidesToScroll: 2,
      scrollbar: false,
      dots: true,
      arrows: true
    }
  }
})

📱 Understanding Responsive Configuration

Mobile-Up Cascading Behavior: Configure your base options for the smallest devices outside the responsive object. Configured options cascade upward to larger breakpoint ranges unless you explicitly defined again.

Configuration Options

swipe for truncated data

Option Type Default Description
slidesToShow Number 4 Number of slides to show at once
slidesToScroll Number 1 Number of slides to scroll at a time
arrows Boolean true Show navigation arrows
dots Boolean true Show pagination dots
fade Boolean false Enable fade transition effect between slides
scrollbar Boolean true Show custom scrollbar for navigation
clickDrag Boolean true Enable click and drag navigation
customArrows String null Custom HTML string for arrow elements (e.g., SVG)
responsive Array [] Responsive breakpoint settings

Browser Support

flo-slide supports all modern browsers including:

Why?