Bootstrap: Karussell funktioniert nicht

Versuchen, ein Karussell in der Webseite zu haben, die ich erstelle. Das Karussell sollte 3 Bilder enthalten, aber die Bilder werden einfach übereinander gestapelt. Diese Indexdatei befindet sich in einem Ordner, der auch die Ordner css, fonts und js enthält. Ich bin mir nicht sicher, ob das eine triviale Lösung ist, aber ich kann es nicht herausfinden.Bootstrap: Karussell funktioniert nicht

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
 
     content must come *after* these tags --> 
 
    <title>Bootstrap 101 Template</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="css/bootstrap.css" rel="stylesheet"> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media 
 
     queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"> 
 
     </script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> 
 
     </script> 
 
     <![endif]--> 
 
</head> 
 

 
<body> 
 
    <div id="carouselControls" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="carousel-item active"> 
 
     <a href="#"> 
 
      <img class="d-block img-fluid" src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a 
 
       ? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="First 
 
       slide"> 
 
     </a> 
 
     </div> 
 
     <div class="carousel-item"> 
 
     <a href="#"> 
 
      <img class="d-block img-fluid" src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a 
 
       ? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="Second 
 
       slide"> 
 
     </a> 
 
     </div> 
 
     <div class="carousel-item"> 
 
     <a href="#"> 
 
      <img class="d-block img-fluid" src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a 
 
       ? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="Third 
 
       slide"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev"> 
 
    <span class="carousel-control-prev-icon" aria-hiddin="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="carousel-control-next" href="carouselControls" role="button" data-slide="next"> 
 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 

 
    <!-- Include all compiled plugins (below), or include individual files as 
 
     needed --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

Auf JSFiddle hier: https://jsfiddle.net/057z6f35/1/

Quelle

2017-04-21 Josh Evans

Bitte geben Sie ein reproduzierbares Beispiel Ihres Problems, entweder in einem Code-Snippet oder auf jsfiddle. Du brauchst deine Bilder nicht; Verwenden Sie nur Dummy-Bilder. – freginold

Haben Sie danach gesucht? –

@JoshEvans Was wir wollen, ist der Code in einem Code-Snippet wie folgt: https://jsfiddle.net/ – xale94

Das Problem hat mit der Bootstrap-Version, die Sie zu tun haben. Ich vermute, dass Sie Bootstrap 3.x verwenden. In diesem Fall müssen die inneren Gegenstände des Karussells eine Klasse von "Gegenstand" haben, nicht "Karussell-Gegenstand". Die Klasse carousel-item ist für die Version v4 alpha vorgesehen. Aktualisieren Sie Ihren Code wie folgt:

<div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <a href="#"> 
      <img class="d-block img-fluid" 
      src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a 
      ? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="First 
      slide"> 
      </a> 
     </div> 
     <div class="item"> 
      <a href="#"> 
      <img class="d-block img-fluid" 
      src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a 
      ? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="Second 
      slide"> 
      </a> 
     </div> 
     <div class="item"> 
      <a href="#"> 
      <img class="d-block img-fluid" 
      src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a 
      ? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="Third 
      slide"> 
      </a> 
     </div> 
    </div>

Quelle

2017-04-21 17:24:41 Sasang

Ja, das das Problem gelöst. Danke @Sasang –

Kein Problem. Bitte. – Sasang

@JoshEvans Wenn die Antwort das tut, was Sie brauchen, akzeptieren Sie sie bitte, damit andere, die Ihre Frage beantworten, sehen können, was das Problem behoben hat. – freginold

Bootstrap: Karussell funktioniert nicht

Antwort

Verwandte Themen