Edgar Quintero Edgar Quintero - 1 month ago 9
jQuery Question

Featherlight Plugin Better Navigation

I have this code:

<section data-featherlight-gallery="" data-feather-filter="a">
<a class="apt-gallery-d" href="img.png">
<img class="module-img-size" src="img.png" alt="1 Alcoba">
</a>
<a class="apt-gallery-d hidden" href="img.png">
<img class="module-img-size" src="img.png" alt="1 Alcoba">
</a>
</section>

jQuery(document).ready(function() {
jQuery('a.apt-gallery-d').featherlightGallery({
openSpeed: 300,
previousIcon: ' ',
nextIcon: ' ',
variant: 'custom-lightbox-css',
loading: 'Cargando...',
});
})


When the lightbox opens, a slider appears with the default lightbox navigation, however the navigation isn't very user friendly. You don't know when you've seen the last image because it looks like and endless loop. Also, if I have only one image the navigation appears regardless.

How can I better control when this next prev arrows show up?

enter image description here

Answer

From the doc:

It sets the classes 'featherlight-first-slide' and 'featherlight-last-slide' if the current slide is the first and/or last one.

You can use those to customize the look or disable the previous & next buttons as you wish