DriftSlider Examples

Download This Plugin Back To jQueryScript

A responsive JS slider under 10KB with physics-based touch, four transition effects, and nine optional modules. Supports Vanilla JS and jQuery.

Slide Effect with Navigation + Pagination + Keyboard + A11y

Effect: Slide Modules: Navigation, Pagination, Keyboard, A11y Grab Cursor
  • Momentum

    Natural touch physics

    Swipe with velocity, friction, and bounce.

  • Structure

    Clean HTML list

    Simple structure with ARIA-ready elements.

  • Control

    Keyboard support

    Arrow keys and Home/End included.

  • Feedback

    Pagination updates

    Active bullets keep context visible.

  • Precision

    Snappy transitions

    Speed and easing tuned for clarity.

Autoplay + Loop with Progress Pagination

Autoplay Loop Pagination: Progress
  • Autoplay

    Keeps moving

    Pauses on hover and resumes smoothly.

  • Loop

    Seamless cycling

    Infinite continuity without jumps.

  • Timing

    Adjustable delay

    Tune delay and interaction behavior.

  • Progress

    Visual progress bar

    Tracks the current position.

Fade Effect

Effect: Fade Module: EffectFade Pagination: Fraction
  • Fade

    Cross fade

    Smooth opacity transitions.

  • Layered

    No horizontal shift

    Slides blend on top of each other.

  • Focus

    Content stays centered

    Ideal for hero banners.

Coverflow Effect

Effect: Coverflow Module: EffectCoverflow Centered Slides
  • Depth

    3D perspective

    Rotate and scale on focus.

  • Stretch

    Spatial spacing

    Dynamic spacing between slides.

  • Overlay

    Smooth shading

    Subtle overlay for depth.

  • Flow

    Continuous loop

    Circular navigation.

  • Focus

    Active spotlight

    Higher opacity on active.

Cards Effect (Stack / Diagonal / Flip)

Effect: Cards Module: EffectCards Modes: Stack, Diagonal, Flip
  • Stack

    Layered cards

    Offset in depth.

  • Stack

    Scale and shade

    Shadow control.

  • Stack

    Tactile feel

    Precise snapping.

  • Diagonal

    Directional offset

    Diagonal stack motion.

  • Diagonal

    Accent overlays

    Overlay highlight.

  • Diagonal

    Layer depth

    Scaled depth effect.

  • Flip

    Flip axis Y

    Card flips on change.

  • Flip

    Quick rotation

    Half-speed transitions.

  • Flip

    Focus swap

    Active card stays crisp.

Responsive Breakpoints

Breakpoints: 640 / 900 Slides Per View: 1 → 2 → 3 Space Between
  • Mobile

    Single slide view

    Compact layout.

  • Tablet

    Two-up layout

    Extra breathing room.

  • Desktop

    Three-up layout

    Showcase more cards.

  • Spacing

    Adaptive spacing

    Responsive gutters.

  • Clarity

    Balanced density

    Consistent rhythm.

Vertical Direction + Custom Physics

Direction: Vertical Physics: Friction / Bounce Slides Per View: 1
  • Vertical

    Up and down

    Scroll-friendly direction.

  • Physics

    Custom friction

    Adjusted drag feel.

  • Bounce

    Soft limits

    Elastic resistance.

Try mouse wheel or trackpad swipe. Grab and drag vertically. Keyboard arrows also work.

Scroll AOS Integration

Module: ScrollAos AOS Animation On-scroll refresh
  • AOS

    Fade up

    Slides animate on scroll.

  • AOS

    Staggered delay

    Delay per slide.

  • AOS

    Refresh on change

    Animation syncs with slide.

jQuery Plugin Mode

jQuery Plugin Navigation + Pagination + Autoplay
  • jQuery

    Plugin init

    Classic jQuery setup.

  • Options

    Simple config

    Navigation and pagination in one call.

  • Autoplay

    Hands-free loop

    Still touch-friendly.

Open this file directly. No build step required.