Bootstrap Karussell Blätter Stapel von Bildern

Ich habe eine Galerie-Website, die ich für einen Freund arbeite, und die Homepage ist, Beispielbilder aus den verschiedenen Galerien zu haben. Ich habe die einfache Version eingerichtet, dachte aber, ein Karussell wäre cool für die Beispielbilder. Ich habe versucht, ein Karussell genau wie auf Bootstrap gezeigt und was ich bekam, war die Menge der Bilder übereinander gestapelt. Ich brauche Hilfe. Hier ist der entsprechende Code (mit Teilen für die Kürze geschnitten)Bootstrap Karussell Blätter Stapel von Bildern

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> 
    <meta name="dcterms.created" content="Thu, 21 Apr 2016 15:56:18 GMT"> 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 
    <title></title> 

    <!--[if IE]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <link rel="stylesheet" 
     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
     integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
     crossorigin="anonymous"> 
    <link rel="stylesheet" href="CSS/designStyle.css"></li> 

    </head> 
    <body> 
    <div class="container"> 
     <div id="clothing" class="col-xs-12"> 
     <div id="clothing-carousel" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
      <li data-target="#clothing-carousel" data-slide-to="0" class="active"></li> 
      <li data-target="#clothing-carousel" data-slide-to="1"></li> 
      <li data-target="#clothing-carousel" data-slide-to="2"></li> 
      </ol> 
      <div class="carousel-inner" role="listbox"> 
      <div class="carousel-item active"> 
       <img src="Photos/Clothing/IMG_0785.jpg" 
        alt="First slide" data-holder-rendered="true" /> 
      </div> 
      <div class="carousel-item"> 
       <img src="Photos/Clothing/IMG_0786.jpg" 
        alt="Second slide" data-holder-rendered="true" /> 
      </div> 
      <div class="carousel-item"> 
       <img src="Photos/Clothing/IMG_1276.jpg" 
        alt="Third slide" data-holder-rendered="true" /> 
      </div> 
      </div> 
      <a class="left carousel-control" href="#clothing-carousel" 
      role="button" data-slide="prev"> 
      <span class="icon-prev" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#clothing-carousel" 
      role="button" data-slide="next"> 
      <span class="icon-next" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
      </a> 
     </div> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script 
     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
     integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
     crossorigin="anonymous"></script> 
    </body> 
</html>

Jede Hilfe würde sehr geschätzt werden.

Quelle

2016-07-14 MVCNovice

Warum behalten Sie data-holder-rendered="true"? Entfernen Sie die Zeilen darunter.

<div id="clothing-carousel" class="carousel slide" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#clothing-carousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#clothing-carousel" data-slide-to="1"></li> 
 
    <li data-target="#clothing-carousel" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="carousel-item active"> 
 
     <img src="Photos/Clothing/IMG_0785.jpg" alt="First slide" data-holder-rendered="true" /> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img src="Photos/Clothing/IMG_0786.jpg" alt="Second slide" data-holder-rendered="true" /> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img src="Photos/Clothing/IMG_1276.jpg" alt="Third slide" data-holder-rendered="true" /> 
 
    </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#clothing-carousel" role="button" data-slide="prev"> 
 
    <span class="icon-prev" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#clothing-carousel" role="button" data-slide="next"> 
 
    <span class="icon-next" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

diese Zeilen statt Setzen.

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

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="Photos/Clothing/IMG_0785.jpg" alt="..."> 
 
     <div class="carousel-caption"> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="Photos/Clothing/IMG_0786.jpg" alt="..."> 
 
     <div class="carousel-caption"> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="Photos/Clothing/IMG_1276.jpg" alt="..."> 
 
     <div class="carousel-caption"> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

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

Quelle

2016-07-14 23:40:27 Melih

Thank you very much. Ich habe einfach kopiert, was in der Bootstrap-Site gesagt wurde, also wusste ich nicht, was schief lief. Es scheint jetzt gut zu funktionieren. – MVCNovice

Bootstrap Karussell Blätter Stapel von Bildern

Antwort

Verwandte Themen