Easy and Fast Parallax Image Slider with CSS3 and jQuery - MrJaredParallaxSlide

MrJared Parallax Slide is a lightweight and fast jQuery plugin for creating a flexible parallax slider with easing and CSS3 transition effects.

How to use it:

1. Include the latest jQuery javascript library and jQuery MrJaredParallaxSlide's script and CSS files on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.mrjared.parallax.slide.js"></script>
<link rel="stylesheet" type="text/css" href="css/mrjared-styles.css">

2. Include jQuery easing plugin on the web page.

<script src="js/jquery.easing.1.3.js"></script>

3. The markup.

<section id="mrjared-slider">
<div class="pages">
<div class="page"> <img class="image-page" src="imgs/img1.jpg" />
<div class="text-page">
<div class="divnimate"> 
YOUR CONTENT 1
</div>
</div>
</div>
<div class="page"> <img class="image-page" src="imgs/img2.jpg" />
<div class="text-page">
<div class="divnimate">
YOUR CONTENT 2
</div>
</div>
</div>
<div class="page"> <img class="image-page" src="imgs/img1.jpg" />
<div class="text-page">
<div class="divnimate">
YOUR CONTENT 3
</div>
</div>
</div>
</div>
<ul class="arrows">
<li><a class="arrow-left" href="#"></a></li>
<li><a class="arrow-right" href="#"></a></li>
</ul>
</section>

4. Initialize the Parallax Slider.

$(document).on('ready',function(e){
$('#mrjared-slider').MrJaredParallaxSlide({
scrollwidth: 327, 
speed: 500
});
});

---

This awesome jQuery plugin is developed by liderrj. For more Advanced Usages, please check the demo page or visit the official website.