OWL Carousel owl-buttons 问题答案

【问题标题】：OWL Carousel owl-buttons issueOWL Carousel owl-buttons 问题
【发布时间】：2017-04-13 21:40:17
【问题描述】：

我使用 OWL Carousel 有一个小问题，owl-buttons 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 {

}

【问题讨论】：

你的 CSS 在做什么？你有什么办法可以发布一个小提琴来显示你的代码工作吗？你在 Owl Carousel 的演示网站上遇到过这个问题吗？
您好，很遗憾我无法显示整个 css，但如果您需要了解一些 div 样式，我可以在这里发布。
我不会移动你那里的第一位：.owl 按钮，将包装器留在原处并将定位应用于内部 div/实际按钮。
对不起，我不明白
不要这样做：.product-view #owl-product-image-thumbs.owl-theme .owl-controls .owl-buttons { position: absolute;顶部：计算（50% - 15px）；宽度：100%； }

标签： javascript jquery css owl-carousel owl-carousel-2

【解决方案1】：

我不会移动 .owl 按钮（包装器），将其保留在原处并将定位应用于内部 div 元素/实际按钮。

所以不要这样：

.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); }

祝你好运！！

【讨论】：