Mobile-friendly Pure JavaScript Content Slider – Ratslider

Are you looking for pure javascript based content slider then here i have shared simple javascript library which help you to integrate a Mobile-friendly Pure JavaScript Content Slider on your website. Ratslider is a stand alone responsive slider maker library wrote in vainilla javascript and its extends RatsliderCore Class.

Libraries

Include the following javascript and CSS library on page.

<link rel="stylesheet" href="ratslider.css">
<script src="ratslider.js"></script>

HTML

Create the HTML for the carousel.

<div id="my-slider">
            <div class="slide" >
                <h1>1</h1>
            </div>
            <div class="slide">
                <h1>2</h1>
            </div>
            <div class="slide" >
                <h1>3</h1>
            </div>
            <div class="slide"  >
                <h1>4</h1>
            </div>
        </div>

JS

Initialize the carousel with options. you can also perform some action under callback method.

<script>
            const my-slider=new Ratslider({
                    id:'#my-slider', //my slider id css selector
                    slides:'.slide', //my slide classes inside my slider css selector
                    dots:true, //enable dots handlers
                    handlers:true, //enable arrow handlers
                    draggable:true, //enable dragg navigatioin (suport touch events)
                    create:true // use this option to create on class initialization
                },
                (element)=>{ //callback executed when current slider its in place.
                    console.log('do something');
                }
            );
        </script>

• onChange function – event triggered when some navigation event occurs – optional
• setCurrentSlide function to write a custom strategy – optional
• resetCurrentSlide function – required if setCurrentSlide is declared
• getCurrentSlide function – required if setCurrentSlide is declared

Functions

• setCurrentSlide(index=int,goto=false) void
• resetCurrentSlide() void
• next(callback) void
• prev(callback) void
• goTo(index=int,callback) void
• getMetadata() return {container,id,slidesClass}
• getCurrentSlide() return domObj
• getCurrentSlideIndex() return int
• getSlides() return Array
• getSliderLength() return int
• getNodeIndex(domElement) return int

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by rantasma, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.