Responsive Photo Gallery / Slider Plugin For jQuery - vit-gallery

vit-gallery is a jQuery gallery plugin which gives you the ability to showcase the photos in a responsive slider/slideshow interface with bullet or smoothly scrolling thumbnail navigation.

How to use it:

1. Add your images together with the thumbnails, controls and image captions to the gallery/slider following the html structure like this:

<div class="gallery">

  <div class="gallery__img-block  ">
      <span class="">
          Image Description 1
      </span>
      <img src="img_1.jpg" thumb-url="img_1.jpg" class="">
  </div>
  <div class="gallery__img-block current">
      <span class="">
          Current Image
      </span>
      <img src="img_21.jpg" thumb-url="img_21.jpg" class="">
  </div>
   <div class="gallery__img-block ">
      <span class="">
          Image Description 3
      </span>
      <img src="img_2.jpg" thumb-url="img_2.jpg" class="">
  </div>
   <div class="gallery__img-block ">
      <span class="">
          Image Description 4
      </span>
      <img src="img_3.jpg" thumb-url="img_3.jpg" class="">
  </div>
  
  ...
  
  <div class="gallery__controls">

  </div>
</div>

2. Put jQuery library and the jQuery vit-gallery plugin's files into the webpage.

<!-- Main stylesheet -->
<link rel="stylesheet" type="text/css" href="__main.css">
<!-- JavaScript -->
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="gallery.js"></script>

3. Initialize the gallery/slider with default options.

$('.gallery').vitGallery()

4. All default options to customize the gallery/slider.

$('.gallery').vitGallery({
  buttons: true,
  galleryHeight: 'auto',
  imgBlockClass: 'gallery__img-block',
  controls: 'thumbnails', // points thumbnails
  controlsClass: 'gallery__controls',
  thumnailWidth: 90,
  thumnaiHeight: 60,
  thumbnailMargin: 5,
  animateSpeed: 1000,
  description: true,
  imgPadding: 15,
  autoplay: false,
  autoplayDelay: 3000,
  fullscreen: false,
  transition: 'slide' // slide crossfade
})

Change log:

2017-08-11

• added new slide effect

---

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