Lightgallery custom events
This is just a demonstration of how to use custom events. You can find more custom events here. In this demo you will see background color of gallery changes on every slide
HTML structure
<div id="custom-events">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
Javascript
var $customEvents = $('#custom-events');
$customEvents.lightGallery();
var colours = ['#21171A', '#81575E', '#9C5043', '#8F655D'];
$customEvents.on('onBeforeSlide.lg', function(event, prevIndex, index){
$('.lg-outer').css('background-color', colours[index])
});
Css (for background color transition)
.lg-outer{
transition: background-color 600ms ease 0s;
}