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.

initLG()

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">
  <div>
    <img src="1.jpg">
    <span>Image 1</span>
  </div>
  <div>
    <img src="2.jpg">
    <span>Image 2</span>
  </div>
  <div>
    <img src="3.jpg">
    <span>Image 3</span>
  </div>
</div>

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>

Changelog:

06/11/2019

• Updated

12/04/2018

• fix css & html bugs