Is there a complete working example for ions-slides
for Ionic 1?
I have tried to incorporate the code snippet example for ion-slides
, but the details are incomplete and thus I am having problem. When I slide, only the first slide looks OK. The subsequent slides keep overlaying on top of the first slide i.e. the first slide does not disappear when slide 2 or 3 slides in. I can still see slide 1 underneath the slide 2 and 3 on top.
If I tweak the CSS by adding a class for .box
or add any div
to apply class .slider
or .slider-slide
taken from the ion-slide-box
example CSS, the slides may disappear or become invisible. What I would see is a white screen with no content.
.slider {
height: 100%;
}
.slider-slide {
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
Also, there is no info on how to control the ion-slides
programmatically from a button. In the older ion-slide-box
there is an API to do so using $ionicSlideBoxDelegate
.
There is an example for ion-slide-box
but the docs say it has been deprecated and its use is discouraged. Newer examples for ion-slides
are for Ionic 2 which is quite different.
UPDATE: I have found an amazing Plunkr example and a blog post How to implement SwiperJs slides with IONIC 1.x using ion-slides. Both are by Srijith. Will be giving them a try first.