web-dev-qa-db-ja.com

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;
}
jqueryhtmlcssowl-carousel
10
bobbyrne01

持っている縮小されたcssファイルには、その要素のスタイルがないように見えます：.owl-theme .owl-controls .owl-page span。

Owlgraphic.comサイトのデモで適用されるスタイルは次のとおりです。 http://jsfiddle.net/s10bgckL/2/

19
im1dermike
pagination:false,
navigation:true

これを試して

7
Chamandeep

Owl Carouselテーマに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 link

3
Andy Moore

あなたが遭遇している問題は、あなたがフクロウのカルーセルのテーマを含めなかったことだと思います。 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" />
0
John H.