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
