Bootstrap 3 Karussell Ausgabe, leerer Bildschirm

Ich habe versucht, Bootstrap Karussell in meine Website zu implementieren. Das Ergebnis, das ich bekomme, ist unten. Gedanken? Ich glaube nicht, dass es ein CSS-Problem ist, aber ich bin mir nicht sicher. Ich habe mich umgeschaut und kann keine schlüssige Antwort finden, warum meine Implementierung nicht richtig herauskommt.Bootstrap 3 Karussell Ausgabe, leerer Bildschirm

<!DOCTYPE html> 
<html> 
<head> 
<meta charset = "UTF-8"> 
<title>Welcome</title> 
<link href ="WorkingFolder/css/bootstrap_custom/bootstrap.css" rel ="stylesheet"> 
</head> 
<body> 
    <nav class="navbar navbar-inverse navbar-fixed-right"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     <a class="navbar-brand" href ="#">|X|</a> 
     </div> 

     <!--Navigation control--> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href ="#">Home</a></li> 
      <li><a href="Portfolio.html">Portfolio</a></li> 
      <li><a href ="Services.html">Services</a></li> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    <div class ="container"> 
     <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> 

      </ol> 

      <div class="carousel-inner"> 
       <div class="item active"> 
       <div class="slide1"></div> 
       <div class="carousel-caption"> 
        <h1>William Xavier Fernandez</h1> 
        <p>|X|</p> 
        <p><a href="#" class="btn btn-primary btn-sm">More  Detail</a></p> 
    </div> 
    </div> 
    <div class="item"> 
     <div class="slide2"></div> 
    <div class="carousel-caption"> 
     <h1>Web Design|Bootstrap|JQuery|</h1> 
     <p>|X|</p> 
     </div> 
     </div> 
      <div class="item"> 
       <div class="slide3"></div> 
       <div class="carousel-caption"> 
       <h1>View my portfolio of work above</h1> 
       <p>|X|</p> 
      </div> 
      </div> 
     </div> 

    <!--Navigation control--> 
    <a class="left carousel-control" href="#mycarousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 
     <a class="right carousel-control" href="#mycarousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div> 
</div> 
    <div class="container"> 
    <p>blah blah blah blah blah blah</p> 
    <p>blah blah blah blah blah blah</p> 
    <p>blah blah blah blah blah blah</p> 
    </div> 
    <script src = "WorkingFolder/jquery-3.0.0.min.js"></script> 
    <script src="WorkingFolder/js/bootstrap.min.js"></script> 

</body>

The result I get

Quelle

2016-07-12 William Fernandez

Es ist nicht klar, was das Problem aus dem Code/Screenshot sein könnte. Ihr Screenshot zeigt das korrekte Laden des Karussells, da in Ihrem Code kein Hintergrundbild definiert ist. Die Icons scheinen nicht richtig geladen zu werden, und das ist wahrscheinlich ein CSS-Problem (etwas überschreibt ihre Schrifteinstellung) –

Danke, die Icons waren ein CSS-Problem, das ich behoben habe, indem ich in die CSS-Datei ging und ein paar Dinge kommentierte . Danke für die schnelle Antwort. –

an der Bootstrap-Dokumentation Blick sieht es aus wie sie ein img die Diahintergrunds Einstellung haben und Sie verwenden ein div mit dem Schlitten eingestuft Nummer ... Ich weiß nicht, ob das die einzige Ursache hier ist, aber ich habe eine Geige gemacht, wo statt

<div class="slide2"></div>

Ich legte ein;

<img src="image.jpg"/>

und das funktioniert so weit, wie ich sagen kann.

https://jsfiddle.net/at4x4w8v/2/

Quelle

2016-07-12 20:08:24 HisPowerLevelIsOver9000

funktioniert dank mann schätze es –

Bootstrap 3 Karussell Ausgabe, leerer Bildschirm

Antwort

Verwandte Themen