I am encountering a minor issue with OWL Carousel - the owl-buttons div is overlapping my images. This makes it difficult to click on the small images within the owl-buttons div zone as that part of the screen is unresponsive.
<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>
https://i.sstatic.net/LjZup.jpg
Below 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 {
}