Swiper carousel doesn't work in Visual studio with Cordova

Question

Currently I try to implement a swiper carousel in an app (with cordova and ionic) but it just doesn't work.

I followed this description.

So I added this links at the top of my 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>

Than I added my modified carousel code (from here) between the <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>

Finally I inserted the js which initializeses the slider at the end:

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

Not the forget the styles:

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

And then this is what I get:

But I want this:

So has someone an idea why it doesn't work? I did exactly like they described. Even if I insert the whole, exact same css code nothing changes. It is just like a yellow div at the page, and its not possible to change the slides. Is it because the ripple-emulator from visual studio, or maybe the js is wrong, but I copied that too. Or have I forget something?

I found no tutorial or example how to do it with visual studio, so maybe there are some additional steps to do I don't know. I just started to learn app development.

Answer 1

Maybe just adding the links doesn't work. I think in cordova you work with angularjs so you need to use angular-ui-swiper. You have to install it with bower. How you can do this is explained in the link above.