Swiperカルーセルは、現在、私は（コルドバとイオンとの）アプリでswiperカルーセルを実装しようとしたが、それだけでは動作しませんコルドバ

Question

とVisual Studioで動作しません。

私はthis descriptionを追いました。

だから、私の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> 

私は<ion-content>タグの間（hereから）私の修正カルーセルコードを追加したより：

<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> 

最後に、私は、スライダを最後に挿入するjsを挿入します。

<script> 
var swiper = new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination', 
    slidesPerView: 2, 
    paginationClickable: true, 
    spaceBetween: 30 
}); 
</script> 

スタイルを忘れないで：だから、誰かのアイデアを持っている

：

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

をそして、これは私が得るものです：

しかし、私はこれをしたいですなぜそれは動作しません？ 私は彼らが説明したのとまったく同じでした。たとえ私が全体を挿入しても、まったく同じCSSコードは何も変わりません。それはページの黄色のdivのようなもので、スライドを変更することはできません。 ビジュアルスタジオからのリップルエミュレータ、またはおそらくjsが間違っているからですか？それもコピーしました。 または私は何かを忘れていますか？

私は、Visual Studioでそれを行うにはどのように何のチュートリアルや例は認められなかったので、多分私は知りません行うには、いくつかの追加のステップがあります。私はちょうどアプリケーション開発を学び始めました。

Answer 1

多分ちょうどリンクを追加することはできません。 私はコードャではanglejsで作業すると思いますので、angular-ui-swiperを使用する必要があります。 あなたはバワーでそれをインストールする必要があります。あなたがこれを行う方法は上記のリンクで説明されています。