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>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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent