Skip to content
The most ridiculous javascript slider you can possibly imagine.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
index.html
pureSlider.css
pureSlider.js

README.md

pureSlider

The most ridiculous javascript slider you can possibly imagine. Written in pure JS.

No, seriously, it's ridiculously simple.

Usage

Include the css file:

<link rel="stylesheet" href="pureSlider.css" />

Create a div with this structure:

<div class="slider-container">
    <div class="slider-element"><img src="http://via.placeholder.com/400x400"/></div>
    <div class="slider-element"><img src="http://via.placeholder.com/400x400"/></div>
    <div class="slider-element"><img src="http://via.placeholder.com/400x400"/></div>
    <div class="slider-element"><img src="http://via.placeholder.com/400x400"/></div>
    <div class="slider-element"><img src="http://via.placeholder.com/400x400"/></div>
</div>

Then include your file as usual

<script type="text/javascript" src="pureSlider.js"></script>

and initialize it. That's all.

new pureSlider({
    container: '.pureSlider-container',
    element: '.pureSlider-element',
    prevBtn: '#prev',
    nextBtn: '#next',
    direction: 'left',
    show: {
        800: 2,
        1024: 4
    },
    animate: true,
    time: 1000,
    speed: 200
});

Options

container (string)
The selector to use as a slider. (optional, it falls back to .slider-container)

element (string)
The selector that identifies all the divs. (optional, it falls back to .slider-element)

prevBtn and nextBtn (string)
Those selectors identify a "left" and "right" buttons. (optional)

show (integer or object)
You can specify the number of slides to show or an object {width: number_of_slides} for responsive number of slides. (optional, it falls back to 1)

animate (boolean)
Set true if you want to loop throug slides (optional, default true)

direction (string)
Set 'left' or 'right' (optional, default 'left')

time (integer)
The interval for the loop, , in milliseconds (optional, default 1000)

speed
The speed for the loop, in milliseconds (optional, default 200)

You can’t perform that action at this time.