MarginSlider

Basic HTML5 slider.

This project is maintained by jsvgoncalves

Welcome to MarginSlider

A simple slider built with Javascript and powered by jQuery.

You can customize the slider as long as it stays horizontal and you pass along all the necessary parameters to the init() method. Future versions may support different orientations and make the slider web responsive.

$ git clone https://github.com/jsvgoncalves/margin-slider.git

Installation

  1. Download the code.
  2. Copy both js/marginslider.js and css/marginslider.css to your project.
  3. Add classes to your marginslider, marginslider_container, left-arrow and right-arrow appropriately or configure the MarginSlider.init().
  4. Call the slider with MarginSlider.init( options ); (I recommend only calling it after all the DOM has loaded, you can do so with $(window).load(function(){ .. });.
  5. That's it!

Demo

Configuration

Use the following format to pass parameters to MarginSlider:

MarginSlider.init({slider: $('myslider'), 
                   no_visible: 3,
                   step: 2
                  });

To configure your MarginSlider the following parameters are available. Additionally, I encourage you to take a look at the code and tweak it to your liking.

{ slider_container: $( 'marginslider_container' ) }

The marginslider container, used to wrap around the slider and create an invisible area. Example:

MarginSlider.init( { slider_container: $( 'marginslider_container' ) } );

{ slider: $( 'marginslider' ) }

The container for the slider, this element should have child elements that will contain the images. Example:

MarginSlider.init( { slider: $( 'myslider' ) } );

{ slider_child: $( '.marginslider li' ) }

The slider_child elements. marginslider should have child elements that will contain the images. Example:

MarginSlider.init( { slider_child: $( '.marginslider li' ) } );

{ bt_left : $('bt_left') }

The button to navigate left could be anywhere on the page, it doesnt matter, it can even be the whole page <body>. Example: 

MarginSlider.init( { bt_left: $( '.left-arrow' ) } );

{ bt_right : $('bt_right') }

The button to navigate right. Example: 

MarginSlider.init( { bt_right: $( '.right-arrow' ) } );

{ no_visible : 5 }

The number of visible elements, note that if the number of visible elements it's greater than the number of total elements the slider will note move. Example: 

MarginSlider.init( { no_visible: 5 } );

{ step : 3 }

How many elements to advance each time the user navigates. Example: 

MarginSlider.init( { step: 3 } );

{ img_margin : 15 }

The spacing between each image on the slider. Example: 

MarginSlider.init( { img_margin : 15 } );

Authors and Contributors

This project is maintained by João Gonçalves (@jsvgoncalves). Special thanks to João Lopes (@lopis).

Support or Contact

Having trouble with MarginSlider? Check out the documentation at https://github.com/jsvgoncalves/margin-slider or open a new issue and I’ll help you sort it out.