OWL 旋转木马 owl- 按钮问题

Question

我使用 OWL 旋转木马，我有一个小问题，owl-按钮 div 在我的图像上方，当我想点击 owl-buttons 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 elements/the 实际按钮。

所以不是这个：

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

这样做（但添加 left:0；对于 div.owl-prev 和 right:0；对于 div.owl-next）：

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

祝你好运！！

OWL 旋转木马 owl- 按钮问题

OWL Carousel owl-buttons issue

javascript

css

jquery

owl-carousel

owl-carousel-2