Lightweight Image Carousel/Slideshow Plugin For jQuery - vSlideshow
File Size: | 4.08 KB |
---|---|
Views Total: | 1378 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
vSlideshow is an extremely lightweight, highly customizable jQuery slideshow plugin for presenting your pictures in a carousel-style fashion.
How to use it:
1. Load jQuery library and the jQuery vSlideshow plugin at the bottom of your web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="slideshow.js"></script>
2. Insert your images as slides into the slideshow.
<div class="slideshow-wrapper"> <div class="slideshow"> <div class="slide"><img src="1.jpg"></div> <div class="slide"><img src="2.jpg"></div> <div class="slide"><img src="3.jpg"></div> </div> </div>
3. Basic CSS styles for the image slideshow.
.slideshow-wrapper { width: 620px; height: 360px; position: relative; overflow: hidden; } .slideshow { width: 999999px; position: absolute; } .slideshow .slide { width: 620px; height: 360px; float: left; }
4. Style the next/prev and bullets navigation.
.slideshow-nav { width: 620px; position: relative; margin: 5px 0; } .slideshow-nav .active { background: none; border: 1px solid #333333; } .slideshow-nav .prev, .slideshow-nav .next { position: absolute; color: #000000; text-decoration: none; } .slideshow-nav .prev { left: 0; } .slideshow-nav .next { right: 0; } .dot { width: 10px; height: 10px; margin: 0 5px; border-radius: 5px; background: #333333; cursor: pointer; }
5. Initialize the image slideshow.
$(document).ready( function() { $(".slideshow").slideshow({ // transition speed speed: 500, // transition delay time pause: 2000, // slide animation effect: "slide", // navigation CSS classes tabClass: ".tab", prevClass: ".prev", nextClass: ".next", // auto-play auto: true }); });
This awesome jQuery plugin is developed by vche036. For more Advanced Usages, please check the demo page or visit the official website.