Responsive Image Zoom Slider/Slideshow With jQuery

File Size: 3.99 KB
Views Total: 48788
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<script src="js/image-slider.js"></script>

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

<link rel="stylesheet" 
      integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" \

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>

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