RINslider
A modern, lightweight Vanilla JavaScript Slider
Performant, accessible and without external dependencies - perfect for modern websites
Features
Everything you need for a modern slider
Pure Vanilla JavaScript
No dependencies - works everywhere
Fully Responsive
Touch-enabled with swipe support
Accessible
ARIA compliant and keyboard accessible
High Performance
Lightweight with lazy loading support
Mouse Drag Navigation
Intuitive drag & drop navigation for desktop
Autoplay
Automatic progression with customizable speed
Swipe Momentum
Natural touch navigation with momentum effect
Infinite Loop
Endless scrolling through slides
Progress Bar
Visual progress indicator for autoplay
Flexible Navigation
Dots, arrows and thumbnail navigation
Thumbnail Navigation
Image preview for easy navigation
Easy to Style
Fully customizable via CSS
Live Demo
Experience RINslider in action
Click, swipe or drag the slides to test the slider
Installation
Ready to use in just a few steps
1. Include Files
Add the CSS and JavaScript files to your HTML page
<link rel="stylesheet" href="css/slider.css">
<script src="src/slider.js"></script>
2. Create HTML Markup
Create the structure for your slider
<div id="mySlider" data-slider>
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
3. Initialize Slider
Initialize the slider with your desired options
const slider = new Slider('#mySlider', {
slidesToShow: 1,
infinite: true,
autoplay: true,
dots: true,
arrows: true
});
Support RINslider
Your support helps keep RINslider actively developed and maintained.
RINslider will always remain fully open source. Support is voluntary and does not affect licensing or features.