Image Carousel With Blurred Background - Product Slider

A customizable, responsive, automatic image carousel jQuery plugin that blurs the current image and uses it as the background of the corresponding slide. 

More Features:

• Configurable animation.
• Autoplay & auto-pause on hover.
• Thumbnail navigation.

How to use it:

1. Load jQuery library and other required resources in the document.

<!-- OPTIONAL -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- jQuery (REQUIRED) -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- jQuery (REQUIRED) -->
<script src="/path/to/cdn/jquery-ui.min.js"></script>
<!-- Plugin Files -->
<link rel="stylesheet" href="product-slider/product-slider.min.css" />
<script src="product-slider/product-slider.min.js"></script>

2. The basic markup for the carousel.

<div id="mySlider">
  <div>
    <img src="1.jpg" />
  </div>
  <div>
    <img src="2.png" />
  </div>
  <div>
    <img src="3.jpg" />
  </div>
</div>

3. Initialize the plugin and done.

$(function(){
  $('#mySlider').productSlider();
});

4. Add descriptions to the images if needed.

<div id="mySlider">
  <div>
    <a class="content" href="#">
      <img src="1.jpg" />
    </a>
    <span class="description">
      <a href="#">
        Caption 1
      </a>
    </span>
  </div>
  <div>
    <a class="content" href="#">
      <img src="2.jpg" />
    </a>
    <span class="description">
      <a href="#">
        Caption 2
      </a>
    </span>
  </div>
  <div>
    <a class="content" href="#">
      <img src="3.jpg" />
    </a>
    <span class="description">
      <a href="#">
        Caption 3
      </a>
    </span>
  </div>
</div>

5. Initialize the plugin and done.

$(function(){
  $('#mySlider').productSlider();
});

6. Customize the carousel by overring the default options as shown below.

$('#my-slider').productSlider({

  // height of background images
  previewHeight: 450,

  // image height
  slideWidth: 300,
  
  // height of thumbnail images
  navbarHeight: 150,  // [px]
  
  // transition speed
  animationTime: 400,

  // autoplay interval
  autoplay: 3000,

  // pause on hover
  stopOnMouseHover: true,

  // time to wait before transitioning to the next image on click
  delayOnClick: 2000,

  // z-index
  zIndex: 10,
  
})

7. Events.

$('#my-slider').productSlider({

  onNavChanged: (event, payload) => {
    const { before, current } = payload
    console.info(`The shown product changed from ${before.id} to ${current.id}`)
  },

  onInitialized: (event) => {
    // on init
  },
  
})

---

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