Lightgallery comes with a numerous number of beautiful built in animations. You can change the type of transitions by passing the transition name via mode
setting. You can easily create your own animations if you have CSS knowledge.
lg-slide
and lg-fade
transitions are included in lightgallery.css
. for all other transitions you need to include lg-animations.css
in your document
<div id="custom-transitions"> <a href="img/img1.jpg"> <img src="img/thumb1.jpg" /> </a> <a href="img/img2.jpg"> <img src="img/thumb2.jpg" /> </a> ... </div>
lightGallery(document.getElementById('custom-transitions'), { mode: 'lg-fade' })