OWL輪播貓頭鷹按鈕問題

Question

我使用OWL Carousel，但有一個小問題，貓頭鷹按鈕div位於我的圖像上方，當我想單擊貓頭鷹按鈕div區域中的小圖像時，該部分不可單擊。

<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>

這是我的CSS風格

.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

我不會移動.owl-buttons（包裝器），將其保留在原處，並將位置應用於內部div元素/實際按鈕。

所以代替這個：

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

這樣做（但為div.owl-prev添加left：0;和為div.owl-next添加right：0;）：

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

祝你好運！