Lightweight and touch-friendly image gallery-slider based on jQuery – RV-gallery.js

Are you looking for Lightweight and touch-friendly image gallery-slider? If Yes then In this post I am going to share simple Lightweight and touch-friendly image gallery-slider jquery plugin name RV-gallery. It is simple, lightweight yet feature-rich jQuery slider plugin for creating responsive, touch-enabled, highly customizable photo carousels/slider and galleries with lightbox image popup when ever user click on any image.

Slider Gallery


Integrate Lightweight and touch-friendly image gallery-slider

Libraries

Load required dependent and plugins libraries on page where you need to integrate image gallery slider.

<!--CSS-->
<link rel="stylesheet" href="RV-gallery.css">
<1--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="RV-gallery.js"></script>

HTML

Add multiple images inside div container which act like gallery slider with next, previous navigation with lightbox image popup modal.

<div class="gallery">
            <img class="gallery-item" src="http://placeimg.com/600/400/animal">
            <img class="gallery-item" src="http://placeimg.com/600/400/sport">
            <img class="gallery-item" src="http://placeimg.com/600/400/nature">
            <img class="gallery-item" src="http://placeimg.com/600/400/people">
            <img class="gallery-item" src="http://placeimg.com/600/400/tech">
</div>



JS

Quick Initialize the gallery slider plugin with default options.

$(function() {  
 $(selection).initGallery();
});

You can also customize your slider gallery by passing following option in above function.

$(function() {  
 $(selection).initGallery({
  nav: ["<span> < </span>", "<span> > </span>"],
  close: "<span>X</span>",
  showNav: true,
  showNavIfOneItem: false,
  aspectRatio: "auto",
  showDots: false,
  showDotsIfOneItem: false,
  arrows: false,
  fullScreen: true,
  loop: true,
  autoplay: false,
  autoplayDelay: 2000,
  transition: "fade",
  transitionTime: 500,
 });
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

This post sponsored by AgeCalculator.Me
AgeCalculator.Me will help you to calculate your age and let you know how old are you now..!!