Swiper Karussell funktioniert nicht in Visual Studio mit Cordova

Question

Derzeit versuche ich ein Swiper-Karussell in einer App (mit Cordova und Ionen) zu implementieren, aber es funktioniert einfach nicht.

Ich folgte this description.

So habe ich diese Links an der Spitze meiner index.html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css"> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.js"></script> 

als ich meine modifizierten Karussell-Code hinzugefügt (von here) zwischen den <ion-content> tags:

<div class="swiper-container"> 
     <div class="swiper-wrapper"> 
      <div class="swiper-slide">Slide 1</div> 
      <div class="swiper-slide">Slide 2</div> 
      <div class="swiper-slide">Slide 3</div> 
     </div> 

     <!-- Add Pagination --> 
     <div class="swiper-pagination"></div> 
    </div> 

I Schließlich eingefügt die js, die den Schieberegler am Ende initialisiert:

vergessen Sie nicht die die Stile:

.swiper-container { 
    width: 50%; 
    height: 50%; 
} 
.swiper-slide { 
    text-align: center; 
    font-size: 18px; 
    background: #ffd800; 
} 

Und dann ist es das, was ich bekommen:

Aber ich möchte dies:

So hat jemand eine Idee warum es nicht funktioniert? Ich habe genau wie sie beschrieben. Auch wenn ich den ganzen, genau gleichen css Code einfüge ändert sich nichts. Es ist wie ein gelbes div auf der Seite, und es ist nicht möglich, die Folien zu ändern. Ist es, weil der Ripple-Emulator von Visual Studio, oder vielleicht die js ist falsch, aber ich kopierte das auch. Oder habe ich etwas vergessen?

Ich fand kein Tutorial oder Beispiel, wie man es mit Visual Studio macht, also vielleicht gibt es einige zusätzliche Schritte, die ich nicht wissen kann. Ich habe gerade angefangen, App-Entwicklung zu lernen.

Answer 1

Vielleicht funktioniert nur das Hinzufügen der Links nicht. Ich denke, in Cordova arbeiten Sie mit angularjs, so dass Sie angular-ui-swiper verwenden müssen. Sie müssen es mit Laube installieren. Wie Sie dies tun können, erfahren Sie im obigen Link.