Simple Image Slider

Trains at the Howard station, Chicago. (Photos: Kavya Sukumar)

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


					<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>

Include the files 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 responsive">
					  <div class="left image">
					    <img src="before.jpg"/>
					  </div>
					  <div class="right image">
					    <img src="after.jpg"/>
					  </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 any of these values during initialization.


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