Почему точки/кнопки навигации не являются видимыми с использованием owlcarousel?

Почему навигационные кнопки не видны?

Я использую jQuery и owlcarousel (http://owlgraphic.com/owlcarousel/).

http://jsfiddle.net/bobbyrne01/s10bgckL/1/

screenshot

html..

<div id="owl-demo">
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
</div>

js..

$(document).ready(function () {
    $("#owl-demo").owlCarousel({

        autoPlay: 3000, //Set AutoPlay to 3 seconds
        dots: true,
        items: 2,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3]
    });
});

css..

#owl-demo .item {
    margin: 3px;
}
#owl-demo .item img {
    display: block;
    width: 50%;
    height: auto;
}

Ответы

Ответ 1

В мини файле css, который у вас есть, нет стиля для этого элемента: .owl-theme .owl-controls .owl-page span.

Вот стили, которые применяются демо на сайте owlgraphic.com: http://jsfiddle.net/s10bgckL/2/

Ответ 2

pagination:false,
navigation:true

попробуйте это

Ответ 3

Добавить CSS для темы "Сова Карусель",

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />

и изменить,

<div id="owl-demo">

в

<div id="owl-demo" class="owl-theme">

Демонстрация: ссылка jsfiddle

Ответ 4

Я считаю, что проблема, с которой вы сталкиваетесь, заключается в том, что вы не включили тему Сова Карусель. Не уверен, что вы используете CDN, но смотрите здесь: https://cdnjs.com/libraries/owl-carousel и убедитесь, что вы включили CSS для темы в дополнение к стандартный CSS.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />

Ответ 5

точки: false не работает в каруселе совы, как описано в документации. Чтобы скрыть точки, вы можете использовать:

pagination: false

он скрывает только точки и разбиение на страницы.

Ответ 6

Перейдите в файл owl.carousel.min.js или owl.carousel.js, независимо от того, что вы связали.

Найти и заменить disabled на anyClass. Вы найдете 6 раз, наслаждайтесь!