img-slider

A simple jquery plugin for creating image comparison sliders. See live demo at http://kavyasukumar.com/apps/imgSlider/

Getting started

Run npm install img-slider from the root directory of your application.

Include jQuery on your page if you don't already have it. You can use a CDN or the node_module

Include the following lines on your page

   <link rel="stylesheet" type="text/css" href="node_modules/img-slider/distr/imgslider.min.css">
 
    <script type="text/javascript" src="node_modules/img-slider/distr/imgslider.min.js"></script> 

HTML decoration for your images goes like this

<div class="slider">
 
 <div class="slider responsive">
 
  <div class="left image">
 
    <img src="before.jpg"/>
 
  </div>
 
  <div class="right image">
 
    <img src="after.jpg"/>
 
  </div>
 
</div>
 
</div>

Include the following near the end of the page.

<script type="text/javascript">
 
  $('.slider').slider();
 
</script> 

Initialization options

The following are the initialization options and their default values

initialPosition: .5
 
showInstruction: true
 
instructiontext: "Click and Drag"

You can override the values during initialization by passing in the options like this

 <script type="text/javascript">
 
  $('.slider').slider({ instructionText:"New instructions here" });
 
</script> 

Dependencies

• Jquery