Mobile-first Background Image Slider Plugin With jQuery - slider.js
File Size: | 9.33 KB |
---|---|
Views Total: | 2535 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
slider.js is a responsive, cross-platform jQuery carousel / slider plugin which enables the users to slide through a set of background images via touch swipe or mouse drag events. Also provides a navigation controls on mouse hover that allows the users to slide through background images manually on desktop.
How to use it:
1. Include the required CSS style.css
in the head
section of the webpage.
<link rel="stylesheet" href="style.css">
2. Add your images as backgrounds into the slider.
<div id="cont"> <div style="background: url(1.jpg)"></div> <div style="background: url(2.jpg)"></div> <div style="background: url(3.jpg)"></div> </div>
3. Include jQuery library and the jQuery slider.js script at the bottom of the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="slider.js></script>
4. Initialize the slider plugin with default options.
$("#cont").slider()
5. All default customization options.
$("#cont").slider({ autoMove: false, autoMoveOptions: { interval: 5000, pauseOnHover: true, }, buttonsEnabled: true, buttonsOptions: { leftText: "<", rightText: ">", }, bulletsEnabled: true, slideWithFinger: true, slideWithCursor: true, })
This awesome jQuery plugin is developed by bibixx. For more Advanced Usages, please check the demo page or visit the official website.