Responsive Slideshow With Blur Transitions - JS Slider

A JavaScript (jQuery) slider script to create a responsive, accessible, auto-rotating background slideshow/carousel with a subtle blur transition when switching between images.

More features:

• Play/pause controls.
• Navigation arrows.
• Pagination bullets.
• Smooth CSS3 powered transitions.
• Fully responsive based on CSS flexbox.
• Left/right arrows to manually switch between slides.
• Space button to play/pause the slideshow/carousel.

How to use it:

1. Load the Font Awesome 5 for essential icons.

<link rel="stylesheet" href="/path/to/fontawesome/all.css">

2. Load the latest jQuery library and other required resources in the HTML file.

<link rel="stylesheet" href="assets/css/style.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="assets/js/main.js"></script>

3. Build the HTML for the slideshow/carousel. Don't forget to replace the background images with your owns. That's it.

<div id="slider" class="slider">

  <!-- Images -->
  <div class="slider-item active" style="background-image: url(1.jpg)"></div>
  <div class="slider-item" style="background-image: url(2.jpg)"></div>
  <div class="slider-item" style="background-image: url(3.jpg)"></div>
  <div class="slider-item" style="background-image: url(4.jpg)"></div>
  <div class="slider-item" style="background-image: url(5.jpg)"></div>

  <!-- Controls -->
  <div class="slider-panel">
    <div class="slider-panel__navigation">
      <i class="fas fa-circle indicator active" data-slide-to="0"></i>
      <i class="far fa-circle indicator" data-slide-to="1"></i>
      <i class="far fa-circle indicator" data-slide-to="2"></i>
      <i class="far fa-circle indicator" data-slide-to="3"></i>
      <i class="far fa-circle indicator" data-slide-to="4"></i>
    </div>
    <div class="slider-panel__controls">
      <i class="far fa-arrow-alt-circle-left" id="previous"></i>
      <i class="far fa-pause-circle" id="pause-play"></i>
      <i class="far fa-arrow-alt-circle-right" id="next"></i>
    </div>
  </div>
  
</div>

---

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