Slides - sliding slides doesn't work

Ionic Framework ionic-v3
1

I’ve tried to implement Slides in my app, and horizontal sliding doesn’t work on the device. I’m testing on my iPhone. In a simulator it also doesn’t work, only works in the browser. When I set autoplay, then it works fine everywhere, but not manual sliding on the device. Any ideas what is going wrong?

  <ion-slides>
    <ion-slide class="slider">
        <h1>Slide 1</h1>
    </ion-slide>
    <ion-slide class="slider">
        <h1>Slide 2</h1>
    </ion-slide>
  </ion-slides>
2

It should look like that

<ion-content>

  <ion-slides pager>

    <ion-slide padding>
      <h3>Lorem ipsum...</h3>
    </ion-slide>

    <ion-slide padding>
      <h3>Lorem ipsum...</h3>
    </ion-slide>

  </ion-slides>

</ion-content>

Maybe you forgot the ion-content block? Or you do something wrong in your scss slider class

3

I have nothing in scss, and I have this exactly as you have. Still the slider doesn’t slide on my iPhone. It’s been killing me for the past 3 hours, don’t know what’s wrong…

4

Did you set any slider configs in your page.ts file?

Test it with a new generated plain page.

5

I got it!!! This is what broke it down, code below. Any ideas why???

  <ion-toolbar color="primary">
    <div class="location-selector-class">
      <div class="toolbar-icon"><i class="fa fa-globe" aria-hidden="true"></i></div>
      <div class="class">Select</div>
    </div>
  </ion-toolbar>
1 Like
6

It’s the <ion-toolbar> that causes the conflict!

1 Like
7

Hey @dimitri320, Can you please take a look at http://embed.plnkr.co/8v0nBm/ and tell me what is a miss… two sliders on two pages… when I navigate to the second, swipe stops working.

8

Did you found the solution? Ran into the same error. which is kind of strange