Stop looping

[irfanDC]

I am not able to found any option to stop looping at the end of images. currently it is repeating all the images again and again. it should prevent to go to last from 1st images and go to first image from last image.

[ajaypillay]

While I believe that there should be an option to toggle this in-built, you can do so yourself as such (here I'm using React Redux to manage my list of images):

const ImageProvider = ({ images }) => {
    const isOpen = useSelector((state) => state.images.show)
    const index = useSelector((state) => state.images.index)
    const dispatch = useDispatch()

    function close() {
        dispatch(closeViewer())
    }

    function prevIndex() {
        dispatch(setIndex((index + images.length - 1) % images.length))
    }

    function nextIndex() {
        dispatch(setIndex((index + 1) % images.length))
    }

    return (
        isOpen && 
            <Lightbox
                mainSrc={images[index]}
                prevSrc={index > 0 ? images[(index + images.length - 1) % images.length] : null}
                nextSrc={index < images.length - 1 ? images[(index + 1) % images.length] : null}
                onCloseRequest={close}
                onMovePrevRequest={index > 0 ? prevIndex : null}
                onMoveNextRequest={index < images.length - 1 ? nextIndex : null}
            />
    )
}

This prevents looping and also hides the prev button when you're at index 0 and hides the next button when you're at the last index, images.length - 1.