JQuery Cloud-Karussell funktioniert nicht

Ich versuche, Cloud-Karussell zu implementieren, die mit dem Radfahren beginnen sollte, sobald die Seite geladen und pausiert, wenn ich auf dem Laufenden bin.Aber ich kann nichts mit meinem Code tun.JQuery Cloud-Karussell funktioniert nicht

Ich mache es zum ersten Mal, damit ich den Fehler nicht herausfinden kann. Ich habe die Bibliotheken hinzugefügt, aber es gibt mir immer noch diesen Fehler.

$(document).ready(function(){ 
 
    $("#cloud-carousel").CloudCarousel({ 
 
    xPos:285, 
 
    yPos:120, 
 
    speed:0.15, 
 
    xRadius: 16, 
 
    yRadius: 170, 
 
    autorotate:'left', 
 
    buttonLeft: $("#left-but"), 
 
    buttonRight: $("#right-but"), 
 
    mouseWheel:true 
 
    }) 
 
})

img{ 
 
    height:100px; 
 
    width:100px; 
 
    }

<head> 
 
    
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
     <script src="cloud-carousel.1.0.5.js"></script> 
 
     <script language="JavaScript" type="text/javascript" src="jquery.mousewheel.min.js"> 
 
    </script> 
 
     <script language="JavaScript" type="text/javascript" src="jquery-ui.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
<div id="cloud-carousel" class="carousel cloud-carousel active" style="postion:relative; overflow:hidden;"> 
 
    <div class="carousel-cycle" style="display-block"> 
 
    <a class="thumbnail"> 
 
    <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/03/1458289957powerful-images3.jpg" class="carousel cloudcarousel "/> 
 
    </a> 
 
    <a class="thumbnail"> 
 
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdC9d6Z2Al0vMxQRqFc0230CUo-C-1BhIC3I5R9XTFw7MQLdeP" class="carousel cloudcarousel" /> 
 
    </a> 
 
    <a class="thumbnail"> 
 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaKH4dU_U6Pe6WX5G8B9DZkkpzGHUxUJeGmOHbwKh6KrFsZsm6" class="carousel cloudcarousel" /> 
 
    </a> 
 
    <a class="thumbnail"> 
 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaKH4dU_U6Pe6WX5G8B9DZkkpzGHUxUJeGmOHbwKh6KrFsZsm6" class="carousel cloudcarousel"/> 
 
    </a> 
 
    <a class="thumbnail"> 
 
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdC9d6Z2Al0vMxQRqFc0230CUo-C-1BhIC3I5R9XTFw7MQLdeP" class="carousel cloudcarousel"/> 
 
<a> 
 
    </div> 
 
    
 
    </div> 
 
     <input id="left-but" type="button" value="Left"> 
 
     <input id="right-but" type="button" value="Right"> 
 
</body>

Quelle

2017-05-19 Aayushi

welche Fehler kommt genau auf? und kannst du eine Geige geben? – Gabbax0r

Wenn Sie das Code-Snippet oben ausführen, kommt dieser Fehler ----- { "Nachricht": "Uncaught TypeError: $ (...). CloudCarousel ist keine Funktion", "Dateiname": "https://code.jquery.com/jquery-3.1.1.slim.min.js ", " lineno ": 2, " colno ": 31851 }, bekomme ich den gleichen Fehler @ Gabbax0r – Aayushi

, dass der Fehler kommt weil davon: '' SO hostet kein Cloud-Karussell. Sie müssen den vollständigen CDN-Pfad angeben. – vijayP

Siehe unten dies mein Code könnte Ihnen helfen ...

$(document).ready(function(){ 
 
\t \t $('#myCarousel_15').hover(function(){ 
 
\t \t \t $("#myCarousel_15").carousel('pause'); 
 
\t \t },function(){ 
 
\t \t \t $("#myCarousel_15").carousel('cycle'); 
 
\t \t }); 
 
\t });

.adjust-img 
 
{ 
 
\t width : 100%; 
 
\t height : 300px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
\t <div id="myCarousel_15" class="carousel slide" data-ride="carousel"> \t 
 
\t \t <!-- Indicators --> 
 
\t \t <ol class="carousel-indicators"> 
 
\t \t \t <li data-target="#myCarousel_15" data-slide-to="0" class=""></li> 
 
\t \t \t <li data-target="#myCarousel_15" data-slide-to="1" class=""></li> 
 
\t \t \t <li data-target="#myCarousel_15" data-slide-to="2" class="active"></li> 
 
\t \t </ol> 
 
\t \t 
 
\t \t <!-- Wrapper for slides --> 
 
\t \t <div class="carousel-inner" role="listbox"> 
 
\t \t \t <div class="item"> 
 
\t \t \t \t <img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg" alt="Title goes here."> 
 
\t \t \t \t <div class="carousel-caption"> 
 
\t \t \t \t \t <h3>Title goes here.</h3> 
 
\t \t \t \t \t <p>This is 1st image of iceland and this is its caption</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="item"> 
 
\t \t \t \t <img src="http://www.icelandprocruises.co.uk/media/img/gallery/home/0002-gallery-iceland-waterfall-1.jpg" alt="Title goes here."> 
 
\t \t \t \t <div class="carousel-caption"> 
 
\t \t \t \t \t <h3>Title goes here.</h3> 
 
\t \t \t \t \t <p>This is 2nd image of iceland and this is its caption</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="item active"> 
 
\t \t \t \t <img src="http://querzy.com/wp-content/uploads/2016/06/iceland.jpg" alt="Title goes here."> 
 
\t \t \t \t <div class="carousel-caption"> 
 
\t \t \t \t \t <h3>Title goes here.</h3> 
 
\t \t \t \t \t <p>This is 3rd image of iceland and this is its caption</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> \t 
 
\t \t <!-- Left and right controls --> 
 
\t \t <a class="left carousel-control" href="#myCarousel_15" role="button" data-slide="prev"> 
 
\t \t \t <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
\t \t \t <span class="sr-only">Previous</span> 
 
\t \t </a> 
 
\t \t <a class="right carousel-control" href="#myCarousel_15" role="button" data-slide="next"> 
 
\t \t \t <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
\t \t \t <span class="sr-only">Next</span> \t 
 
\t \t </a> 
 
\t </div> 
 
</div>

Quelle

2017-05-19 10:35:49

Ich mache keine Dias. Ich habe diesen Code beim Bootstrap gesehen. Ich wollte es nur wie Wolkenkarussell. Danke trotzdem ! :) – Aayushi

JQuery Cloud-Karussell funktioniert nicht

Antwort

Verwandte Themen