Smooth Horizontal Slider With JavaScript And CSS3 – skrolr

skrolr is a lightweight and dependency-free JavaScript library used to generate a responsive horizontal slider/scroller from an html list that uses CSS3 transitions for the smooth sliding animation.

How to use it:

Add the following JS and CSS files to the webpage.

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

Create an html list for the slider.

<ul id="slide-container">
  <li class="l1"></li>
  <li class="l2"></li>
  <li class="l3"></li>
  <li class="l4"></li>
  <li class="l5"></li>
  <li class="l6"></li>
</ul>

Initialize the skrolr.

mySlider = document.getElementById("slide-container");
mySlider.skrolr ({
  scrollTime: 2000,
  transitionTime: 750,
  arrows: true,
  numWide: [
    [0,500,1], // width of parent is 0-499px, show 1 <li> element
    [500,750,2],
    [750,1000,3],
    [1000,1250,4],
    [1250,1500,5],
    [1500,1750,6],
    [1750,,7] // width of parent is at least (no maximum) 1750px, show 7 <li> elements
  ],
  size: "100% 400px" // width then height
});

All default customization options.

mySlider.skrolr ({
  // animation speed
  scrollTime: 3000,
  // transition speed
  transitionTime: 500,
  // easing effect
  transitionTiming: 'ease-in-out'
  // show the navigation arrows
  arrows: true,
  // stop the slider
  stop: false,
  // Forward and backward
  forward: 500,
  backward: 500,
  numWide: [
    [0,500,1], // width of parent is 0-499px, show 1 <li> element
    [500,750,2],
    [750,1000,3],
    [1000,1250,4],
    [1250,1500,5],
    [1500,1750,6],
    [1750,,7] // width of parent is at least (no maximum) 1750px, show 7 <li> elements
  ],
  // show the buttons
  buttons: false
  // slider size
  size: "100% 400px" 
  
});

Changelog:

09/15/2018

• Bugfix