Search code examples
javascriptowl-carousel

Owl carousel 2 navigation controls are hidden and disabled

I am missing some really basic stuff here. I am setting nav and navText options according to docs, and I can see buttons content being changed in DevTools, but they keep being disabled and hidden. What am I missing? I am using v2.3.4. Browsed plenty of question, but could not find anything similar

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

enter image description here enter image description here

Solution

  • Owl Carousel does not respect nav and navText when there is single item in container, but I had loop: true flag!! Thats why I expected it to work.

    Code from sources:

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

    This line

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

    can be simplified to disabled = 1 <= 1 in my case.

    So, in order to display "single" item in owl carousel and still show controls, I have to put at least two items in container

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