2016-07-14 18 views
0

Mein Bootstrap-Karussell kann nicht alle Vorschaubilder anzeigen. Ich habe 4 Bilder, aber es zeigt nur 3 der Bilder, das letzte ist ein leeres Bild auf meiner Website.Bootstrap-Karussell zeigt nicht alle Vorschaubilder an

Hier ist mein Code:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 

    <div class="item active"> 
     <img src="Images/womenad1.jpg"> 
    </div> 

    <div class="item"> 
     <img src="Images/womenad2.jpg"> 
    </div> 

    <div class="item"> 
     <img src="Images/womenad3.jpg"> 
    </div> 

    <div class="item"> 
     <img src="Images/womenad4.jpg"> 
    </div> 

    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 

</div> 

Bitte beraten.

+1

Ich habe Ihren Code lokal angewendet und ich kann 4 Bilder sehen. –

+0

Ich sehe kein Problem mit dem Code. Vielleicht ist der Bildlink selbst das Problem oder andere, die über diesen Code hinausgehen. – Jefsama

+0

Ich weiß, dass das womenad4.jpg in Ihrem Bilderordner fehlt ODER Überprüfen Sie die Schreibweise und die Erweiterung. –

Antwort

-2

Ist womenad4.jpg sicher im Verzeichnis Images? Und überprüfen Sie auch, ob es ein PNG oder ein anderer Dateityp ist.

Dies könnte sonst arbeiten ..

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

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="Images/womenad1.jpg" alt="Chania"> 
    </div> 

    <div class="item"> 
     <img src="Images/womenad2.jpg" alt="Chania"> 
    </div> 

    <div class="item"> 
     <img src="Images/womenad3.jpg" alt="Flower"> 
    </div> 

    <div class="item"> 
     <img src="Images/womenad4.jpg" alt="Flower"> 
    </div> 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 
0

Ich bin mir nicht sicher, was schief gelaufen ist, aber ich änderte die Größe aller meiner Thumbnails fast die gleiche Breite und Höhe zu sein. Dies hat das Problem gelöst.

Verwandte Themen