Simple jQuery Image Carousel with Parallax Effect

A lightweight jQuery plugin which allows you to create an auto-rotating image carousel with background parallax effect.

How to use it:

1. Load the jQuery library and the jQuery Parallax Carousel plugin on the web page.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery-parallax-carousel.js"></script>

2. Insert your images into the carousel.

<div class="pcarousel">
  <div class="pcarousel-slides">
    <div class="slide" id="slide-1">
      <a href="#"><img src="demo1.png" alt="demo1"/></a> </div>
    <div class="slide" id="slide-2">
      <a href="#"><img src="demo2.png" alt="demo2"/></a> </div>
    <div class="slide" id="slide-3">
      <a href="#"><img src="demo3.png" alt="demo3"/></a> </div>
  </div>
</div>

3. Style the carousel and add the background parallax image.

.pcarousel {
  width: 980px;
  height: 280px;
  background: transparent url(home_bg.jpg) no-repeat 0 0;
  overflow: hidden;
  position: relative;
}

.pcarousel .slide {
  position: absolute;
  top: 0px;
  left: 0px;
}

4. Style the carousel pager.

.pcarousel-pager {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.pcarousel-pager-item {
  height: 18px;
  width: 18px;
  float: left;
  margin: 5px;
  background-color: rgba(128,128,128,0.5);
  cursor: pointer;
}

.pcarousel-pager-item.active { background-color: #4c88c5; }

---

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