使用 Cordova，Swiper 轮播在 Visual studio 中不起作用

Question

目前我尝试在一个应用程序中实现一个刷卡轮播（使用 cordova 和 ionic），但它不起作用。

所以我在 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一样，无法更换幻灯片。是因为 visual studio 的 ripple-emulator 还是 js 错了，但我也复制了那个。还是我忘记了什么？

我没有找到如何使用 visual studio 执行此操作的教程或示例，所以可能还有一些我不知道的额外步骤。我刚开始学习应用程序开发。

Answer 1

也许只是添加 links 不起作用。我认为在 cordova 中你使用 angularjs，所以你需要使用 angular-ui-swiper。你必须用凉亭安装它。上面的 link 中解释了如何执行此操作。

使用 Cordova，Swiper 轮播在 Visual studio 中不起作用

Swiper carousel doesn't work in Visual studio with Cordova

javascript

android

cordova

ionic-framework

swiper