Tiny Responsive Background Slideshow Plugin With jQuery - slide.js
File Size: | 15.8 KB |
---|---|
Views Total: | 2697 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery responsive slideshow plugin which automatically fades through a list of slides with background images just like a carousel slider.
How to use it:
1. Place jQuery library and the jQuery.slide.js script at the end of the document.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.slide.js"></script>
2. Create the html for the slideshow and add your own background images using data-bg
attribute as this:
<div class="slide"> <ul> <li data-bg="1.jpg"></li> <li data-bg="2.jpg"></li> <li data-bg="3.jpg"></li> <li data-bg="4.jpg"></li> </ul> </div>
3. The main CSS styles for the slideshow.
.slide { position: relative; margin: 100px auto; width: 80%; height: 350px; background: #ccc; } .slide ul li { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; list-style: none; }
4. Style the pagination & navigation controls.
.slide .dots { position: absolute; left: 0; right: 0; bottom: 20px; width: 100%; z-index: 2; text-align: center; } .slide .dots li { display: inline-block; margin: 0 10px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; opacity: 0.4; cursor: pointer; transition: background .5s, opacity .5s; list-style: none; } .slide .dots li.active { background: #fff; opacity: 1; } .slide .arrow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slide .arrow .arrow-left, .slide .arrow .arrow-right { position: absolute; z-index: 2; top: 50%; margin-top: -25px; display: block; width: 50px; height: 50px; cursor: pointer; opacity: 0.5; transition: background .5s, opacity .5s; } .slide .arrow .arrow-left:hover, .slide .arrow .arrow-right:hover { opacity: 1; } .slide .arrow .arrow-left { left: 20px; background: url("../img/arrow-left.png"); } .slide .arrow .arrow-right { right: 20px; background: url("../img/arrow-right.png"); }
5. Call the function on the top container to initialize the slideshow:
$('.slide').slide();
6. Plugin's default customization options.
$('.slide').slide({ // auto play isAutoSlide: true, // auto pause on hover isHoverStop: true, // auto pause when the current windows loses focus isBlurStop: true, // shows pagination dots isShowDots: true, // shows navigation arrows isShowArrow: true, // animation speed slideSpeed: 1000, // transition delay switchSpeed: 500, // custom CSS classes dotsClass: 'dots', dotActiveClass: 'active', arrowClass: 'arrow', arrowLeftClass: 'arrow-left', arrowRightClass: 'arrow-right', // click or mouseover dotsEvent: 'click' });
This awesome jQuery plugin is developed by jqueryscript. For more Advanced Usages, please check the demo page or visit the official website.