OWL Carousel owl-buttons issue

Question

I use OWL Carousel and I have a little problem, the owl-buttons div is over my images, when I want to click on the small images in the owl-buttons div zone, that part is not clickable.

<script type="text/javascript">
    jQuery(document).ready(function () {

        var owl = jQuery("#owl-product-image-thumbs");

        owl.owlCarousel({
            lazyLoad: true,

            itemsCustom: [[0, 3], [320, 3], [480, 4], [500, 5], [600, 6], [768, 2], [992, 3], [1199, 3]],

            responsiveRefreshRate: 50,

            slideSpeed: 200,

            paginationSpeed: 500,

            /*autoPlay: 3000,*/

            stopOnHover: true,

            rewindNav: true,

            rewindSpeed: 600,

            pagination: false,

            navigation: true,

            navigationText: [" <img src='<?php echo $this->getSkinUrl('images/prev.png');?>'>","<img src='<?php echo $this->getSkinUrl('images/next.png');?>'>"]

        });


    });
</script>

This is my CSS style

.product-view #owl-product-image-thumbs.owl-theme .owl-controls .owl-buttons {
    position: absolute;
    top: calc(50% - 15px);
    width: 100%;
}

#owl-product-image-thumbs {
    margin-bottom: 0;
}

.product-view .owl-theme .owl-controls .owl-buttons div {
    background: none;
}

.product-view #latest_offers.owl-theme .owl-controls .owl-buttons div.owl-prev {
    float: left;
}

.product-view #latest_offers.owl-theme .owl-controls .owl-buttons div.owl-next {
    float: right;
}

.product-view #owl-product-image-thumbs.owl-theme .owl-controls .owl-buttons div.owl-prev {
    float: left;
    margin: 0;
    padding: 0;
}

.product-view #owl-product-image-thumbs.owl-theme .owl-controls .owl-buttons div.owl-next {
    float: right;
    margin: 0;
    padding: 0;
}

.product-view .owl-theme .owl-controls .owl-buttons div img {
    width: 30px;
}

.product-view .owl-theme .owl-controls .owl-buttons {

}

Answer 1

I would not move the .owl-buttons (wrapper), leave that where is and apply the positioning to the inner div elements/the actual buttons.

So instead of this:

.product-view #owl-product-image-thumbs.owl-theme .owl-controls .owl-buttons { position: absolute; top: calc(50% - 15px); width: 100%; }

Do this (but add left:0; for div.owl-prev and right:0; for div.owl-next):

.product-view #owl-product-image-thumbs.owl-theme .owl-controls .owl-buttons div { position: absolute; calc(50% - 15px); }

Best of luck!!