lexider

1
2
3
4
5
1
2
3
4
5

Flexider is a reponsive, accessible and lightweight slider built with pure JavaScript with no external dependency.

Why Use Flexider?

There are bunch of slider libraries on GitHub, then why use Flexider? Because apart from traditional features a slider is supposed to have, Flexider comes with touch+keyboard support and is 'visibility-aware' which gives you native-like experience across devices. Users don't have to forcibly use next/previous buttons to switch between slides, they can swipe or use keyboard's (if available) & buttons to do so. If you're building something like a progressive web-app, Flexider would be a good fit.

Get Started

  • Include files:

              
              
              <link rel="stylesheet" href=".../flexider.css"/>
              <script src=".../flexider.js"> </script>
              
              
  • Put markup

              
        <div class="flexider" data-fx-mode="auto" data-fx-delay="3">
           <div class="slide-con">
        
              <div class="slide">
                  //slide 1 stuff here
              </div>
        
              <div class="slide">
                  //slide 2 stuff here
              </div>
        
             //other slides
        
           </div>
       </div>
              
              

Customizing Flexider

Mode

Flexider has two modes- auto & manual. When set to auto flexider's slides move automatically and when set to manual flexider gets next/previous buttons and it's slides move only on user-action. You can change this mode easily by changing data-fx-mode attribute's value on a flexider wrapper-

   
   
      <div class="flexider" data-fx-mode="auto || manual">
   
   
   

Delay b/w auto-moves

You can set the delay between 'auto-moves' using data-fx-delay attribute (if data-fx-mode is set to auto).

        
        
        <div class="flexider" data-fx-mode="auto" data-fx-mode="3">
        //data-fx-mode takes time in seconds