Using Owl Carousel 2 with BigPicture JS

Question

Im trying to use a combined

Owl Carousel 2 (https://owlcarousel2.github.io/OwlCarousel2/)

BigPicture (https://github.com/henrygd/bigpicture)

to be able to click on the images in the slider aswell and make it fullscreen.

Owl setup:

owl.owlCarousel({
        loop: true,
        margin: 24,
        nav: true,
        items: 1,
        dots: false,
})

BigPicture setup:

var imageLinks = document.querySelectorAll('#image_container img')
    for (var i = 0; i < imageLinks.length; i++) {
        imageLinks[i].addEventListener('click', function (e) {
            e.preventDefault()
            BigPicture({
                el: e.target,
                gallery: '#image_container',
                animationStart: function () {
                    document.documentElement.style.overflowY = 'hidden'
                    document.body.style.overflowY = 'scroll'
                },
                onClose: function () {
                    document.documentElement.style.overflowY = 'auto'
                    document.body.style.overflowY = 'auto'
                },
            })
        })
    }

HTML:

<div class="owl-carousel owl-theme" id="image_container">
    <img data-bp="(imageurl)" src="(imageurl)" class="img-fluid">
</div>

The issue is, because of loop: true, owl cloned its items, which then makes BigPicture having doubled the items

Example i uploaded 3 images to the slider, but when in BigPicture its 7 images.

I have tried setting

loop: false,
rewind: true

But i think the animation on this is pretty meh, and not the result i wanna achive, also last image is then not being shown on the slideshow.

Anyone know a workaround this?

Much apreciated!