Simple Infinite Looping Image Carousel - jQuery yz_roll_banner
File Size: | 3.85 KB |
---|---|
Views Total: | 3053 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple jQuery implementation for an infinite-looping image carousel, which shows a series of images with slide in and slide out transitions.
How to use it:
1. Insert a group of image into the carousel.
<div class="yz_boxWrap"> <div class="boxImgWrap"> <img src="img/index_img_1.png" alt=""> <img src="img/index_img_2.png" alt=""> <img src="img/index_img_3.png" alt=""> <img src="img/index_img_4.png" alt=""> <img src="img/index_img_5.png" alt=""> <img src="img/index_img_6.png" alt=""> </div> </div>
2. Insert jQuery library and the yz_roll_banner plugin's script into the page.
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="js/yz_roll_banner.js"></script>
3. The basic CSS styles for the image carousel.
.yz_boxWrap { position: absolute; left: calc(50% - 135px); top: 50px; width: 270px; height: 480px; overflow: hidden; } .yz_boxWrap .boxImgWrap { height: 100%; position: absolute; } .yz_boxWrap .boxImgWrap img { display: block; float: left; } .yz_boxWrap .boxBottomNav { position: absolute; bottom: 0px; width: 100%; height: 15%; background-color: rgba(0, 0, 0, 0.5); } .yz_boxWrap .boxBottomNav div { margin: 5px auto; width: 85px; } .yz_boxWrap .boxBottomNav a { display: inline-block; width: 10px; height: 10px; margin: 0 2px; border-radius: 50%; background-color: rgba(200,200,200,0.5); } .yz_boxWrap .boxBottomNav a.boxAColor { background: #f00; } .yz_boxWrap .prev, .next { position: absolute; top: calc(50% - 40px); width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; cursor: pointer; text-align: center; line-height: 40px; font-size: 30px; color: #fff; font-weight: bolder; display: none; } .yz_boxWrap .prev { left: 10px; } .yz_boxWrap .next { right: 10px; }
4. Activate the image carousel. Done.
yz_roll_banner();
This awesome jQuery plugin is developed by 984245844. For more Advanced Usages, please check the demo page or visit the official website.