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.