Elegant Image Gallery/Slider/Carousel Library – LGallery

Category: Gallery , Javascript , Recommended , Slider | June 11, 2019
Author: mopcweb
Views Total: 1,189 views
Official Page: Go to website
Last Update: June 11, 2019
License: MIT


Elegant Image Gallery/Slider/Carousel Library – LGallery


LGallery is a multi-purpose JavaScript library to help developers to create responsive, mobile-friendly galleries, sliders, carousels, lightboxes for images.

How to use it:

Import the LGallery’s JavaScript and CSS files into the document.

<link rel="stylesheet" href="/path/to/lgallery.min.css">
<script src="/path/to/lgallery.min.js"></script>

Initialize the library and we’re ready to go.


Create a gallery lightbox where the users are able to switch between images in a lightbox popup.

<div class="example" data-lgallery="1.jpg,2.jpg,3.jpg"></div>
<!-- OR -->
<div class="example" data-lgparent">
    <img src="1.jpg">
    <span>Image 1</span>
    <img src="2.jpg">
    <span>Image 2</span>
    <img src="3.jpg">
    <span>Image 3</span>

Create a regular image slider.

<div class="example" data-lgslider="1.jpg,2.jpg,3.jpg"></div>

Create a slider with image previews.

<div class="example" data-lgpreview="1.jpg,2.jpg,3.jpg"></div>

Create a carousel that allows you to display multiple images on a slide.

<div class="example" data-lgcarusel="1.jpg,2.jpg,3.jpg"></div>



  • Updated


  • fix css & html bugs

You Might Be Interested In:

Leave a Reply