Left/Right navigation arrows are missing when image is open

[DCzajkowski]

Weird. Can you provide a reproduction link?

[MicroDroid]

I have no idea how to replicate a Vue thing on codepen.io

Anyways, look what I've found:

Removing that class makes the arrow show up. I could provide the entire rendered DOM tree relevant to lightbox if you wish.

[DCzajkowski]

This class is applied, when it's impossible to navigate to next/previous. Do you have more than one image?

[MicroDroid]

Oh! I forgot I have set only a single image in the images prop. My bad, this is not a bug.

[MicroDroid]

Just curious though, how would I make it show the image in the thumbnail as the first image when specifying images array?

I mean consider the following:

<div v-for="image in images" :key="image">
    <lightbox :thumbnail="image" :images="images">
        <lightbox-default-loader slot="loader" />
    </lightbox>
</div>

What happens is when I click any images it displays the first image in images and not the one I clicked on.

[DCzajkowski]

This library is supposed to be used as a simple click-on-one-image-to-toggle-a-gallery. If you want you could create a computed property that you'd pass an image you want to be first.

<template>
    <div>
        <div v-for="image in images" :key="image">
            <lightbox :thumbnail="image" :images="ordered(image)">
                <lightbox-default-loader slot="loader" />
            </lightbox>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                images: [
                    'http://bit.ly/2EjbImW',
                    'https://bit.ly/2rQZxUf',
                    'https://bit.ly/2r8tNLH',
                ],
            }
        },
        computed: {
            ordered() {
                return (image) => {
                    const images = [...this.images]

                    images.splice(images.indexOf(image), 1)

                    return [image, ...images]
                }
            },
        },
    }
</script>

Mind you, this will change the order of images in the popup. There is no other way to achieve this and I am not planning to implement it.

Demo: https://codepen.io/DCzajkowski/pen/vPjXqR

[MicroDroid]

Ah, that makes it clear. Thanks!