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