Owl carousel 2 导航控件被隐藏和禁用

Question

我在这里遗漏了一些非常基本的东西。我正在根据 docs 设置 nav 和 navText 选项，我可以看到 DevTools 中的按钮内容正在更改，但它们一直被禁用和隐藏。我错过了什么？我正在使用 v2.3.4。浏览了很多问题，但找不到类似的问题

<div class="owl-carousel quote-carousel">
    <div class="quote-item" style="background-image: url('/images/landing/profile.png')">
        <div class="quote-text">"Where are navigation controls??"</div>
        <div class="quote-name">John Doe, Hampshire</div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $(".owl-carousel").owlCarousel({
            items: 1,
            loop: true,
            auto: true,
            nav: true,
            navText: ["<div>LEEEEFT</div>", "<div>RIIIIGHT</div>"] 
        });
    });
</script>

Answer 1

Owl 当容器中有单个项目时，轮播不尊重 nav 和 navText，但我有 loop: true 标志！！这就是我希望它起作用的原因。

来源代码：

Navigation.prototype.draw = function() {
    var difference,
        settings = this._core.settings,
        disabled = this._core.items().length <= settings.items,
        index = this._core.relative(this._core.current()),
        loop = settings.loop || settings.rewind;

    this._controls.$relative.toggleClass('disabled', !settings.nav || disabled);

    if (settings.nav) {
        this._controls.$previous.toggleClass('disabled', !loop && index <= this._core.minimum(true));
        this._controls.$next.toggleClass('disabled', !loop && index >= this._core.maximum(true));
    }

这一行

disabled = this._core.items().length <= settings.items,

在我的例子中可以简化为disabled = 1 <= 1。

因此，为了在 owl 轮播中显示“单个”项目并仍然显示控件，我必须在容器中放置至少两个项目

<div class="owl-carousel quote-carousel">
    <div class="quote-item" style="background-image: url('/images/landing/profile.png')">
        <div class="quote-text">"Where are navigation controls??"</div>
        <div class="quote-name">John Doe, Hampshire</div>
    </div>
    <div class="quote-item" style="background-image: url('/images/landing/profile.png')">
        <div class="quote-text">"Where are navigation controls??"</div>
        <div class="quote-name">John Doe, Hampshire</div>
    </div>
</div>

Owl carousel 2 导航控件被隐藏和禁用

Owl carousel 2 navigation controls are hidden and disabled

javascript

owl-carousel