web-dev-qa-db-ja.com

owlcarousel-ドットは表示されません

私はプロジェクトに取り組んでおり、javascriptの知識が非常に限られているため、owlcarouselを使用することにしました。すべてが正常に機能していましたが、今私は問題に直面しています。

ドットをtrueに設定しましたが、表示されません。これまでの私の仕事は次のとおりです。

.container {
        width: 90%;
        margin: 0 auto;
}

/*Text over image*/
.item {
        width: 100%;
}

.item img {
   display: block;
   max-width:100%;
}


/*Carousel Nav Buttons*/

.carousel-nav-left{
    height: 30px;
    font-size: 30px;
    position: absolute;
    top: 0%;
    bottom: 0%;
    margin: auto 0;
    margin-left: -40px;
}

.carousel-nav-right{
    height: 30px;
    font-size: 30px;
    position: absolute;
    top: 0%;
    bottom: 0%;
        right: 0%;
    margin: auto 0;
    margin-right: -40px;
}


@media (max-width: 700px) {
        
        .carousel-nav-left{
                margin-left: -30px;
        }

        .carousel-nav-right{
                margin-right: -30px;
        }
        
        .container {
                width: 85%;
        }
}

@media (max-width: 410px) {
        
        .carousel-nav-left{
                margin-left: -25px;
        }

        .carousel-nav-right{
                margin-right: -25px;
        }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>owlcarousel</title>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" type="text/css" href="css/style.css" />
                <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" />
                <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    </head>
        
    <body>
                <div class="container">
                        <div class="carousel">
                        
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                        </div>
                </div>
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
                <script>
                        (function($){
        
                                $('.carousel').owlCarousel({
                                        items: 4,
                                        loop:true,
                                        margin:10,
                                        nav:true,
                                        navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
                                        dots: true,
                                        paginationSpeed: 300,
                                        rewindSpeed: 400,
                                        responsive:{
                                                0:{
                                                        items:1
                                                },
                                                490:{
                                                        items:2
                                                },
                                                770:{
                                                        items:3
                                                },
                                                1200:{
                                                        items:4
                                                },
                                                1500:{
                                                        items:5
                                                }
                                        }
                                })
                                
                        })(jQuery);
                </script>
        </body>
</html>

この問題を解決する方法を教えてください

javascriptcssowl-carousel
19
user6247447

必要なリソースがすべて含まれていることを確認してください。

  • jquery-2.1.1.min.js
  • owl.carousel.min.js
  • owl.carousel.min.css

また、CSSに適切なowl-pageおよびowl-controlsが含まれていることを確認してください

重要なCSSコードの例を次に示します。

.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
    background: none repeat scroll 0 0 #869791;
    border-radius: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
}

このJSFiddle に見られるように。

JSFiddleコードからdots: trueを削除（および実行）しても、ページネーションの「ドット」が表示されることに注意してください。ただし、上記のCSSを削除すると、ドットは表示されません。

追加の回答

これは受け入れられた回答なので、@ Kevin Vincendeauによって提供され、コメントで@Amr Ibrahimによって注意が向けられた別の潜在的な修正を追加します。

HTMLに必要なクラスがすべて含まれていることを確認してください。メインコンテナのowl-carouselやowl-themeなど。

13
Danny Mahoney

ウェブページでOwlスライダーを初めて使用するときにも同じ問題に直面しました。ドットナビゲーションが表示されなかったため、これはバグである可能性があると考え、調査を行うことにしました。

後で、2つのcssファイルを含める必要があると考えました。 1つはown-carousel.min.cssともう一方はowl.theme.default.min.css。この後、コンテナdivにはowl-carouselおよびowl-themeクラスリストのクラス。例：

<div id="slider" class="owl-carousel owl-theme">
        <img src="/dist/assets/img1.jpg" /> 
        <img src="/dist/assets/img2.jpg" /> 
        <img src="/dist/assets/img3.jpg" /> 
        <img src="/dist/assets/img4.jpg" />
</div>

これが後でこの問題に直面している人々に役立つことを願っています。

43
Tojo Chacko

クラス owl-carouselおよびowl-themeは、ドットを表示するために必要です。

18
Kevin Vincendeau

ポイントは、コードにowl-themeクラスがないことです！

CSSおよびJSリソースを含める

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

HTMLをセットアップします

<div class="owl-carousel owl-theme">
  <div> Content 1 </div>
  <div> Content 2</div>
  <div> Content 3</div>
  <div> Content 4</div>
  <div> Content 5</div>
  <div> Content 6</div>
  <div> Content 7</div>
</div>

注：親Divにowl-themeクラスを含めない場合、ドットは表示されません。したがって、それらをエンドユーザーに見えるようにする必要があります。

プラグインを呼び出します

Owl初期化関数を呼び出すと、カルーセルの準備ができました。

$(function(){
  $(".owl-carousel").owlCarousel();
});

デモ：

enter image description here

$(function(){
    $(".owl-carousel").owlCarousel();        
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
  <div> Content 1 </div>
  <div> Content 2</div>
  <div> Content 3</div>
  <div> Content 4</div>
  <div> Content 5</div>
  <div> Content 6</div>
  <div> Content 7</div>
</div>
1
RAM