Bootstrap Carousel weigert sich zu arbeiten

Ich habe alles versucht, einschließlich dieser Code, der direkt aus ww3 selbst ist, mit zusätzlichen cdn. es funktionierte Bootstrap 4 Beta, aber alles andere auf meiner Website funktioniert auf einer früheren Version und ich bin neu und abergläubisch über die Laufzeit; nicht wünschen, sie sind beide, wenn ich nicht zuBootstrap Carousel weigert sich zu arbeiten

<!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 --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    </head> 
    <body> 



     <div id="myCarousel" class="carousel slide" data-ride="myCarousel"> 

      <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" role="listbox"> 
       <div class="item active"> 
       <img src="https://media.galaxant.com/000/462/866/desktop-1462221325.png" alt="spacious tent"> 
       </div> 
       <div class="item"> 
       <img src="https://s-media-cache-ak0.pinimg.com/736x/98/4f/f8/984ff8bea911ffb5977635185d79396e.jpg" alt="lots of head room"> 
       </div> 
       <div class="item"> 
       <img src="http://kitchenfunwithmy3sons.com/wp-content/uploads/2016/04/the-best-camping-ideas-hacks-gear-tips-and-tricks-37.jpg" alt="no bull crap"> 
       </div> 
      </div> 
      <!--End listbox--> 

      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 

      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 


      <script 
    src="http://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
      </div> 

</body>

Quelle

2017-06-06 Tech Tron

Können Sie uns erklären, was nicht funktioniert? – Bestter

die Dias, es sieht genauso aus wie es sollte. Sie können nicht ändern, indem Sie auf Schaltflächen klicken (die kleinen Kreise oder die Karussell-Steuerung) und es wird nicht –

außer den Pfeilen springen zwischen Bildern der Schieberegler funktioniert gut. – Syfer

Ihre JQuery Version einige Probleme hat. Versuchen Sie es mit einer älteren Version. Zu Demonstrationszwecken habe ich es durch vers.2.1 ersetzt und es funktioniert. Und Sie brauchen nicht Ihre CSS wiederholen Verknüpfung

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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> 
 

 

 
<body> 
 

 

 

 
    <div id="myCarousel" class="carousel slide" data-ride="myCarousel"> 
 

 
    <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" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="https://media.galaxant.com/000/462/866/desktop-1462221325.png" alt="spacious tent"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/736x/98/4f/f8/984ff8bea911ffb5977635185d79396e.jpg" alt="lots of head room"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://kitchenfunwithmy3sons.com/wp-content/uploads/2016/04/the-best-camping-ideas-hacks-gear-tips-and-tricks-37.jpg" alt="no bull crap"> 
 
     </div> 
 
    </div> 
 
    <!--End listbox--> 
 

 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left"></span> 
 
    </a> 
 

 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right"></span> 
 
    </a> 
 

 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    </div>

Quelle

2017-06-12 05:24:37

Bootstrap Carousel weigert sich zu arbeiten

Antwort

Verwandte Themen