Working example for ion-slides for Ionic 1?


#1

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.