JQuery Slider For Displaying Products Image Carousel With Blurred Background

The sliding product is a smooth lightweight slider for displaying products and an automatic slideshow plugin that blurs the current image and uses it as the background of the corresponding slide.

responsive image slider with text, bootstrap carousel slider with thumbnails, responsive slider jquery free download with demo, jquery product slider

How to make use of it:

1. Load jQuery library and different required assets within the doc.

<!-- 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 primary 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 achieved.

$(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 achieved.

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

6. Customize the carousel by overring the default choices as proven under.

$('#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
  },
  
})

Image Carousel With Blurred Background, product slider Plugin/Github, bootstrap responsive slider free download, jquery image slider, slick slider, jquery carousel slider example