Elegant Image Gallery/Slider/Carousel Library – LGallery

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

Preview:

Elegant Image Gallery/Slider/Carousel Library – LGallery

Description:

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

You Might Be Interested In:


Leave a Reply