Tiny Responsive Background Slideshow Plugin With jQuery - slide.js

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.