Responsive Image Zoom Slider/Slideshow With jQuery

This is a responsive, fullscreen, dynamic, and automatic image slider/slideshow/carousel plugin that fades through an array of images with zoom in/out effects.

How to use it:

1. Include the necessary JavaScript and CSS files on the webpage.

<link rel="stylesheet" href="css/image-slider.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/image-slider.js"></script>

2. Include the Font Awesome Iconic Font for the navigation arrows (OPTIONAL).

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" 
      integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" \
      crossorigin="anonymous">

3. Create the HTML for the image slider.

<!-- main image slider container -->
<div id="slider-main">

  <!-- previous button -->
  <button id="prev"><i class="fa fa-angle-double-left"></i></button>

  <!-- image container -->
  <div id="slider"></div>

  <!-- next button -->
  <button id="next"><i class="fa fa-angle-double-right"></i></button>

  <!-- pagination bullets -->
  <div id="circles"></div>

</div>
<!-- end of main image slider container -->

4. Define an array of images to be displayed in the slider.

var arr=['1.jpg','2.jpg','3.jpg'];

5. Override the default interval for the slide.

var interval=5000; 

---

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