Minimal Background Slideshow With Image Lazy Load - jQuery Slide

This is a minimal, responsive, flexible jQuery background image slideshow/carousel plugin that has the ability to load background images on demand.

More features:

• Auto cross-fading at a given speed.
• Auto Pause on hover.
• Auto Pause when the window loses focus.
• Navigation arrows and pagination bullets.
• Click or hover the pagination bullets to switch between background images.
• Cross-browser and easy to implement.

How to use it:

1. To use the slideshow plugin, import the following JavaScript and CSS files into your html file.

<link rel="stylesheet" href="jquery.slide.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.slide.js"></script>

2. Create a regular html list for the slideshow and add your own background images to the slides using the data-bg attribute as these:

<div class="slide">
  <ul>
    <li data-bg="https://picsum.photos/1200/450/?random"></li>
    <li data-bg="https://picsum.photos/1200/460/?random"></li>
    <li data-bg="https://picsum.photos/1200/480/?random"></li>
    <li data-bg="https://picsum.photos/1200/490/?random"></li>
    <li data-bg="https://picsum.photos/1300/490/?random"></li>
  </ul>
</div>

3. To initialize the background slideshow, just call the function slide on the top container and done.

$(function() {
  $('.slide').slide();
});

4. Full plugin options to customize the background slideshow as per your needs.

$(function() {
  $('.slide').slide({

    // auto play
    isAutoSlide: true, 

    // pause on hover
    isHoverStop: true,

    // pause when window loses focus
    isBlurStop: true,

    // shows pagination bullets
    isShowDots: true,

    // shows navigation arrows
    isShowArrow: true,

    // shows navigation arrows on hover
    isHoverShowArrow: true,

    // load all images on load
    isLoadAllImgs: false,

    // sliding speed
    slideSpeed: 10000,

    // switching speed
    switchSpeed: 500,

    // click, mouseover or mouseenter
    dotsEvent: 'click',

    // default CSS classes
    dotsClass: 'dots',  
    dotActiveClass: 'active', 
    arrowClass: 'arrow',
    arrowLeftClass: 'arrow-left', 
    arrowRightClass: 'arrow-right'

  });
});

---

This awesome jQuery plugin is developed by wabish. For more Advanced Usages, please check the demo page or visit the official website.