Native Scroll Slider

Native CSS Approach

This slider leverages native browser overflow scrolling - no DOM manipulation required

Unlike other sliders, this library doesn't rewrite your DOM or add unnecessary markup. It works with a simple overflow: auto container and enhances it with JavaScript controls. You keep full control over your HTML structure and styling.

Natural scrolling behavior: Touch and mouse drag scrolling work exactly as they do in any native scrolling container - no hijacked events or custom touch handlers. The slider enhances native scroll behavior with navigation controls and additional features.

The demos below use custom gradient styles for visual appeal, but the slider works with any HTML content. Toggle the styles below to see the raw HTML structure:

1. Basic Slider

Simple slider showing 3 slides at once with navigation buttons

1

Warm Flame

2

Night Fade

3

Spring Warmth

4

Juicy Peach

5

Young Passion

6

Lady Lips

const slider = new NativeScrollSlider(document.querySelector('#basic-slider .slider-track'), {
  slidesToShow: 3,
  slidesToScroll: 1,
  gap: 20
});

2. Autoplay Slider

Automatically advances slides every 3 seconds (pauses on hover)

1

Sunny Morning

2

Rainy Ashville

3

Frozen Dreams

4

Winter Neva

5

Dusty Grass

const slider = new NativeScrollSlider(document.querySelector('#autoplay-slider .slider-track'), {
  slidesToShow: 2,
  autoplay: true,
  autoplaySpeed: 3000
});

3. Infinite Scroll

Seamlessly loops through slides for endless scrolling

1

Warm Flame

2

Night Fade

3

Spring Warmth

4

Juicy Peach

5

Young Passion

const slider = new NativeScrollSlider(document.querySelector('#infinite-slider .slider-track'), {
  slidesToShow: 3,
  infinite: true,
  autoplay: true
});

4. Center Mode

Centers the active slide with visual highlighting

1

Lady Lips

2

Sunny Morning

3

Rainy Ashville

4

Frozen Dreams

5

Winter Neva

const slider = new NativeScrollSlider(document.querySelector('#center-slider .slider-track'), {
  slidesToShow: 1,
  centerMode: true,
  infinite: true
});

5. Responsive Slider

Adapts to different screen sizes with custom breakpoints

1

Slide 1

2

Slide 2

3

Slide 3

4

Slide 4

5

Slide 5

6

Slide 6

7

Slide 7

8

Slide 8

const slider = new NativeScrollSlider(document.querySelector('#responsive-slider .slider-track'), {
  slidesToShow: 4,
  responsive: [
    {
      breakpoint: 1200,
      settings: { slidesToShow: 3 }
    },
    {
      breakpoint: 992,
      settings: { slidesToShow: 2 }
    },
    {
      breakpoint: 768,
      settings: { slidesToShow: 1 }
    }
  ]
});

6. Show Overflow Mode

Peek at next/previous slides to indicate more content

1

Dusty Grass

2

Golden Hour

3

Warm Flame

4

Night Fade

5

Spring Warmth

const slider = new NativeScrollSlider(document.querySelector('#overflow-slider .slider-track'), {
  slidesToShow: 2,
  showOverflow: true,
  overflowAmount: 0.3
});

Installation & Usage

Get started with Native Scroll Slider in your project

NPM Installation

npm install native-scroll-slider

CDN Usage

<script src="https://unpkg.com/native-scroll-slider/dist/native-scroll-slider.min.js"></script>

Basic HTML Structure

<div class="slider-container">
  <div class="slider-track">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
  <button class="slider-prev">Previous</button>
  <button class="slider-next">Next</button>
</div>

Initialize JavaScript

import NativeScrollSlider from 'native-scroll-slider';

const slider = new NativeScrollSlider(
  document.querySelector('.slider-track'),
  {
    slidesToShow: 3,
    autoplay: true
  }
);

Configuration Options

All available configuration options with their default values:

Display Options

slidesToShow: 4 - Number of slides visible at once
slidesToScroll: 1 - Number of slides to scroll per navigation
gap: 24 - Space between slides in pixels
startSlide: 0 - Index of initial slide to show
minSlideWidth: 0 - Minimum width for each slide in pixels

Behavior Options

infinite: false - Enable infinite/continuous scrolling
bounceBack: false - Enable bounce-back animation at edges
centerMode: false - Center the active slide
autoplay: false - Enable automatic slide advancement
autoplaySpeed: 3000 - Autoplay interval in milliseconds

Overflow Options

showOverflow: false - Show partial next/previous slides
overflowAmount: 0.5 - Amount of overflow slide to show (0-1)
containerMaxWidth: 1200 - Maximum container width in pixels
basePadding: 35 - Base padding in pixels for overflow mode

Navigation Options

prevElement: '.prev, .slider-prev, .slider-grid-prev' - Selector for previous button
nextElement: '.next, .slider-next, .slider-grid-next' - Selector for next button

Responsive Options

responsive: [...] - Array of breakpoint configurations

// Example responsive configuration
responsive: [
  {
    breakpoint: 1200,
    settings: { slidesToShow: 3 }
  },
  {
    breakpoint: 992,
    settings: { slidesToShow: 2 }
  },
  {
    breakpoint: 768,
    settings: { slidesToShow: 1 }
  }
]