Minimal Background Slideshow With Image Lazy Load - jQuery Slide

File Size: 15.6 KB
Views Total: 15655
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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">
    <li data-bg=""></li>
    <li data-bg=""></li>
    <li data-bg=""></li>
    <li data-bg=""></li>
    <li data-bg=""></li>

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

$(function() {

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

$(function() {

    // 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.