Minimal Carousel With Background Image Parallax Effect
File Size: | 320 KB |
---|---|
Views Total: | 701 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.