2017-07-25 9 views
0

カルーセルを使用しようとしていますが、次と前のロゴは表示されません。ブートストラップカルーセル次回と前回のロゴが表示されます

Like in this image.

<!--Slide start --> 


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="img/sampleslide.png" alt="Açıklama"> 
     <div class="carousel-caption"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam dolorem corporis distinctio fuga modi provident facilis quod, quis totam temporibus fugit commodi? Vero magnam cupiditate est eveniet, ipsam quo consectetur. 
     </div> 
    </div> 
    <div class="item"> 
     <img src="img/sampleslide.png" alt="..."> 
     <div class="carousel-caption"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non dolor cum, suscipit reprehenderit voluptates sint fugiat eveniet iure in, sequi recusandae repellendus laborum aut obcaecati? Ducimus laborum nulla natus fugiat. 
     </div> 
    </div> 

    <div class="item"> 
     <img src="img/sampleslide.png" alt="..."> 
     <div class="carousel-caption"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non dolor cum, suscipit reprehenderit voluptates sint fugiat eveniet iure in, sequi recusandae repellendus laborum aut obcaecati? Ducimus laborum nulla natus fugiat. 
     </div> 
    </div> 

    <div class="item"> 
     <img src="img/sampleslide.png" alt="..."> 
     <div class="carousel-caption"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non dolor cum, suscipit reprehenderit voluptates sint fugiat eveniet iure in, sequi recusandae repellendus laborum aut obcaecati? Ducimus laborum nulla natus fugiat. 
     </div> 
    </div> 

    </div> 


    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

これらは私の制御コードです。何か問題はありますか? ここに私の全体のコードです:https://pastebin.com/KKYx3yBF

+0

うーん...完全なコードのようには見えません。あなたは完全なコードを投稿しますか? –

+0

私の全体のコードはここにあります: https://pastebin.com/KKYx3yBF –

+0

どのバージョンのBootstrapを使用していますか? –

答えて

0

私は問題を発見しました。その理由は、あなたがブートストラップCDNを含んでいれば、それらは表示されないからです。このリンクをhtmlファイルに含める必要があります。

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> 
関連する問題