This time I will share jQuery Plugin and tutorial about Mobile-first Background Image Slider Plugin With jQuery – slider.js, hope it will help you in programming stack.
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.
1 |
< link rel = "stylesheet" href = "style.css" > |
2. Add your images as backgrounds into the slider.
2 |
< div style = "background: url(1.jpg)" ></ div > |
3 |
< div style = "background: url(2.jpg)" ></ div > |
4 |
< div style = "background: url(3.jpg)" ></ div > |
3. Include jQuery library and the jQuery slider.js script at the bottom of the webpage.
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src="slider.js></ script > |
4. Initialize the slider plugin with default options.
5. All default customization options.
13 |
slideWithFinger: true , |
14 |
slideWithCursor: true , |
This awesome jQuery plugin is developed by bibixx. For more Advanced Usages, please check the demo page or visit the official website.