2016-03-31 2 views
-4

Ich wollte eine grundlegende Gleitkarussell auf meiner Website hinzufügen und nach einer Menge von seraching gefunden Owl Carousel. Ich habe alles nach Anweisungen befolgt, aber egal was ich mache, es funktioniert nicht. Im Folgenden ist der vollständige Code:Karussell funktioniert nicht

<html> 
<head> 
    <title>Carousel</title> 

    <link rel="stylesheet" href="owl/owl.carousel.js"> 
    <link rel="stylesheet" href="owl/owl.theme.default.css"> 
    <link rel="stylesheet" href="owl/owl.animate.css"> 

</head> 

<body> 
    <div class="owl-carousel"> 
     <div class="item"><h4>1</h4></div> 
     <div class="item"><h4>2</h4></div> 
     <div class="item"><h4>3</h4></div> 
     <div class="item"><h4>4</h4></div> 
     <div class="item"><h4>5</h4></div> 
     <div class="item"><h4>6</h4></div> 
     <div class="item"><h4>7</h4></div> 
     <div class="item"><h4>8</h4></div> 
     <div class="item"><h4>9</h4></div> 
     <div class="item"><h4>10</h4></div> 
     <div class="item"><h4>11</h4></div> 
     <div class="item"><h4>12</h4></div> 
</div> 

<script src="js/jquery-2.2.2.min.js"></script> 
<script src="owl/owl.carousel.js"></script> 
<script> 
    $(document).ready(function(){ 
    $('.owl-carousel').owlCarousel(
     loop:true, 
     margin:10, 
     nav:true, 
     responsive:{ 
     0:{ 
      items:1 
     }, 
     600:{ 
      items:3 
     }, 
     1000:{ 
      items:5 
     } 
     } 
     })); 
    }); 
    </script> 
</body> 

EDIT: an den Browser Der Ausgang ist nur eine Reihe von Zahlen vertikal statt horizontal Karussell angezeigt.

Ich bin sicher, dass die erforderlichen CSS und Javascript-Dateien alle vorhanden sind. Bitte lösen Sie dieses Problem jemand.

+1

Schritt 1: Überprüfen Sie Ihre Browserkonsole auf Fehler. Und wenn das nicht hilft, dann zeig uns ein Live-Beispiel. – CBroe

+1

Missing '{' nach 'owlCaraousel (', überprüfen Sie zumindest Ihren Browser-Debugger auf Fehler. –

+0

@DavidNguyen Ich entschuldige mich. Es gibt keine Fehler pro say.Ich bekomme eine unerwünschte Ausgabe. Hinzufügen der '{' macht nicht Jedenfalls einen Unterschied. "Ich habe die Frage so bearbeitet, dass sie dieselbe enthält. – user3650571

Antwort

0

Sie schließen eine } mehr, die Sie öffnen. Versuchen Sie, diese zu ändern:

 1000:{ 
      items:5 
     } 
     } 
     })); 
    }); 
    </script> 

Um dies:

 1000:{ 
      items:5 
     } 
     })); 
    }); 
    </script> 

Oder fügen Sie in der function({...}); Hoffe, es hilft!