Mobile-first Background Image Slider Plugin With jQuery - slider.js

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.