Bootstrap Karussell Bilder sind unabhängig von der Bildschirmbreite übereinander gestapelt

Ich versuche, ein Bootstrap-Karussell, das automatisch zwischen Bildern in einer bestimmten Reihenfolge wechselt. Alles funktioniert in Bezug auf Kontrollen (d. H. Pfeile zum Hin und Her zwischen Bildern & Schieberegler Positionsanzeige), aber die Bilder sind übereinander gestapelt, wenn ich die Seite laden. Kann jemand darauf hinweisen?Bootstrap Karussell Bilder sind unabhängig von der Bildschirmbreite übereinander gestapelt

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Appraisal</title> 
    <link rel="stylesheet" href="style.css"> 
    <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css"> 
    </head> 

    <body> 
    <header> 
     <h1 class="animated slideInLeft">text goes here</h1> 
     <p>...</p> 
     <h4 class="animated slideInRight">portfolio</h4> 
    </header> 

    <div id="myCarousel" class="carousel slide"> 
     <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"> 
      <img src="./pics/space_1.jpg" alt="Space 1" class="img-responsive"> 
      <div class="carousel-caption"> 
      <h3>Appraisal 1</h3> 
      <p></p> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="./pics/space_2.jpg" alt="Space 2" class="img-responsive"> 
      <div class="carousel-caption"> 
      <h3>Appraisal 2</h3> 
      <p></p> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="./pics/space_3.jpg" alt="Space 2" class="img-responsive"> 
      <div class="carousel-caption"> 
      <h3>Appraisal 3</h3> 
      <p></p> 
      </div> 
     </div> 

     </div> 

     <a href="#myCarousel" class="carousel-control" data-slide="prev"> 
     <span class="icon-prev left"></span> 
     </a> 
     <a href="#myCarousel" class="carousel-control" data-slide="next"> 
     <span class="icon-next right"></span> 
     </a> 
    </div> 

    <div class="skills"> 

    </div> 

    <div class="certs"> 


    </div> 

    <footer> 
     <p>developed by: jefferson steelflex</p> 

    </footer> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script> 
    </body> 
</html>

Quelle

2017-07-04 cerrach

Es ist nur ein Tippfehler. Ändern Sie einfach die Klasse "karussell_inner" im Foliencontainer div für "Karussell-innen".

Quelle

2017-07-04 16:41:07

wow danke das hat den Trick gemacht – cerrach

Bootstrap Karussell Bilder sind unabhängig von der Bildschirmbreite übereinander gestapelt

Antwort

Verwandte Themen