1. Zuhause
  2. Frage und Antwort
  3. Bootstrap Caroussel nicht gleiten

Bootstrap Caroussel nicht gleiten

2016-05-05 6 views
1

Ich versuche, meine Webseite mit Bootstrap Caroussel eine Diashow hinzufügen, aber scheint, dass die Fotos nicht gleitet, nur das erste Bild zeigt. Und die Knöpfe unten und auf beiden Seiten funktionieren nicht gut. Möchte jemand meinen Code anschauen und mir dabei helfen?Bootstrap Caroussel nicht gleiten

</!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=divice-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> 
 
    <link rel="stylesheet" href="main.css" type="text/css"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <style> 
 
    .carousel-inner > .item > img, 
 
    .carousel-inner > .item > a > img { 
 
     width: 70%; 
 
     margin: auto; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <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> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
     <img src="images/reverse1.jpg" class="img-responsive"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="images/12976329_224255987939469_1210159874_n.jpg" class="img-responsive"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="images/13098983_106200126454398_1338693822_n.jpg" width="450" height="450"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="images/13166635_879641332146032_791969762_n.jpg" width="450" height="450"> 
 
     </div> 
 
    </div> 
 
    <!-- Left and right controls --> 
 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left"></span> 
 
    </a> 
 
    <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right"></span> 
 
    </a> 
 
    </div> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
 
    </script> 
 
    <script src="jquery-1.12.3.js"></script> 
 
    <script> 
 
    $('#myCarousel').carousel(); 
 
    </script>

Quelle

2016-05-05 Amber Shen

Antwort

0

Sie haben bootstrap.min.js

</!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=divice-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="main.css" type="text/css"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <style> 
 
    .carousel-inner > .item > img, 
 
    .carousel-inner > .item > a > img { 
 
     width: 70%; 
 
     margin: auto; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <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> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
     <img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" class="img-responsive"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" class="img-responsive"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" width="450" height="450"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" width="450" height="450"> 
 
     </div> 
 
    </div> 
 
    <!-- Left and right controls --> 
 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left"></span> 
 
    </a> 
 
    <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right"></span> 
 
    </a> 
 
    </div> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
 
    </script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
    <script> 
 
    $('#myCarousel').carousel(); 
 
    </script>

Quelle

2016-05-05 14:47:33 DININDU

+0

Dank entgehen lassen! Es funktioniert jetzt –

 Verwandte Themen

  • Keine verwandten Themen^_^