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

0 128

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.

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="https://placeimg.com/600/400/animal">
            <img class="gallery-item" src="https://placeimg.com/600/400/sport">
            <img class="gallery-item" src="https://placeimg.com/600/400/nature">
            <img class="gallery-item" src="https://placeimg.com/600/400/people">
            <img class="gallery-item" src="https://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.

 

 

Leave A Reply

Your email address will not be published.