OWL Carousel猫头鹰按钮问题

时间:2017-04-13 21:40:17

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

我使用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>

enter image description here

这是我的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 {

}

1 个答案:

答案 0 :(得分:2)

我不会移动.owl按钮(包装器),将其留在哪里并将定位应用于内部div元素/实际按钮。

所以不要这样:

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

执行此操作(但添加左:0;对于div.owl-prev和右:0;对于div.owl-next):

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

祝你好运!!