Minimal Carousel With Background Image Parallax Effect

A tiny jQuery parallax carousel script that converts an HTML list into a carousel slider with a parallax effect on the background images during slide transitions. 

How to use it:

1. Create an HTML unordered list for the parallax carousel and add background images as 'layers' to each list item as displayed below:

<div id="parallax">
  <ul>
    <li>
      <div class="parallax-item bg1" data-move="15"></div>
      <div class="parallax-item bg2" data-move="35"></div>
      <div class="parallax-item bg3" data-move="50"></div>
    </li>
    <li>
      <div class="parallax-item bg4" data-move="15"></div>
      <div class="parallax-item bg5" data-move="35"></div>
      <div class="parallax-item bg6" data-move="50"></div>
    </li>
    <li>
      <div class="parallax-item bg7" data-move="15"></div>
      <div class="parallax-item bg8" data-move="35"></div>
      <div class="parallax-item bg9" data-move="50"></div>
    </li>
    ... more slides here ...
  </ul>
</div>

<!-- Navigation Buttons -->
<button disabled="true" id="prevParallax">Prev</button>
<button id="nextParallax">Next</button>

2. Add the necessary JavaScript and CSS files to the page.

<link rel="stylesheet" href="/path/to/css/style.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/main.js"></script>

3. Override the default background images.

.bg1{
  background-image: url(bg-1.png)
}

.bg2{
  background-image: url(bg-2.png)
}

.bg3{
  background-image: url(bg-3.png)
}

/* ... */

---

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