Simple jQuery Image Carousel with Parallax Effect
File Size: | 149 KB |
---|---|
Views Total: | 6422 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.