Easy Mobile-friendly Gallery & Carousel Plugin - jQuery RV-gallery

A simple, lightweight yet feature-rich jQuery slider plugin for creating responsive, touch-enabled, highly customizable carousels and galleries with lightbox integration on modern web app.

How to use it:

1. Just import the following JavaScript and CSS files into the document and we're ready to go.

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

2. Insert your images into a container element.

<div class="gallery">
  <img class="gallery-item" src="1.jpg">
  <img class="gallery-item" src="2.jpg">
  <img class="gallery-item" src="3.jpg">
  <img class="gallery-item" src="4.jpg">
  <img class="gallery-item" src="5.jpg">
  ...
</div>

3. Initialize the RV-gallery plugin with default options.

jQuery('.gallery').initGallery({
  // optione here
});

4. All default customization options. These options can be overwritten when initializing plugin, by passing an object literal, or after initialization.

jQuery('.gallery').initGallery({

  // navigation arrows
  nav: ["<span> < </span>", "<span> > </span>"],

  // close button
  close: "<span>X</span>",

  // shows navigation
  showNav: true,
  showNavIfOneItem: false,

  // custom aspect ratio
  aspectRatio: "auto",

  // shows pagination bullets
  showDots: false,
  showDotsIfOneItem: false,

  // shows navigation arrows
  arrows: false,

  // is fullscreen?
  fullScreen: true,

  // is infinite loop?
  loop: true,

  // autoplay options
  autoplay: false,
  autoplayDelay: 2000,

  // animation options
  // 'fade' or 'slide'
  transition: "fade",
  transitionTime: 500,
  
});

Changelog:

2018-05-31

• bug fix

---

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