Horizontal & Vertical Image Carousel Plugin For jQuery
File Size: | 6.96 KB |
---|---|
Views Total: | 3492 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another jQuery slideshow / carousel plugin used to create horizontal, vertical or crossfading image carousels with several customization options.
Features:
- Autoplay.
- Endless looping.
- Custom trigger events.
- Custom animations.
- Support both horizontal or vertical carousel.
- Next / prev navigation and dots indicator.
How to use it:
1. Insert a list of images into the carousel.
<div id="demo" class="image-slider"> <div class="box"> <ul class="list"> <li><a href="#"><img src="1.jpg" alt="Alt"></a></li> <li><a href="#"><img src="2.jpg" alt="Alt"></a></li> <li><a href="#"><img src="3.jpg" alt="Alt"></a></li> <li><a href="#"><img src="4.jpg" alt="Alt"></a></li> </ul> </div> </div>
2. Add custom CSS styles to the carousel.
.image-slider { position: relative; height: 264px; width: 424px; overflow: hidden; border: 1px solid #C5C5C5; } .image-slider .box { overflow: hidden; position: relative; width: 100%; height: 100%; } .image-slider .list { overflow: hidden; width: 9999px; } .image-slider .list li { float: left; position: relative; width: 424px; } .image-slider .list li a { display: block; } .image-slider .list img { _vertical-align: top; } .image-slider .btn { position: absolute; left: 30px; bottom: 30px; z-index: 3; width: 150px; height: 10px; font: 0/0 Arial; } .image-slider .btn li { display: inline-block; margin-right: 3px; width: 10px; height: 10px; background: url(../images/slide-btn.png) no-repeat -35px 0; cursor: pointer; *display: inline; *zoom: 1; } .image-slider .btn .selected { width: 35px; background-position: 0 0; } .image-slider .plus, .image-slider .minus { position: absolute; left: 0; top: 50%; margin-top: -17px; width: 55px; height: 35px; line-height: 35px; background: rgba(0,0,0,0.6); color: #fff; text-align: center; cursor: pointer; } .image-slider .plus { right: 0; left: auto; }
3. Add jQuery library and the jQuery slideshow.js script at the bottom of the web page.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.slideshow.js"></script>
4. Initialize the carousel. Just call the function on the top element and done.
$('#demo').slideShow({/*OPTIONS*/});
5. Full customization options.
$('#demo').slideShow({ // custom trigger event events: "click", // x = horizontal carousel // y = vertical carousel // fade = crossfading carousel type: "x", // initial image start: 0, // animation speed speed: 800, // transition interval time: 2000, // autoplay auto: true, // show navigation btn: true, // next button plus: false, // previous button minus: false });
This awesome jQuery plugin is developed by Maizi. For more Advanced Usages, please check the demo page or visit the official website.