Ionic two slider in same page issue

Ionic Framework ionic-v3
1

i create two slider in home page,

  <ion-slide style="background-color: green">
    <h2>Slide 1</h2>
  </ion-slide>

  <ion-slide style="background-color: blue">
    <h2>Slide 2</h2>
  </ion-slide>

  <ion-slide style="background-color: red">
    <h2>Slide 3</h2>
  </ion-slide>

</ion-slides>
<ion-slides pager>

  <ion-slide style="background-color: green">
    <h2>Slide 1</h2>
  </ion-slide>

  <ion-slide style="background-color: blue">
    <h2>Slide 2</h2>
  </ion-slide>

  <ion-slide style="background-color: red">
    <h2>Slide 3</h2>
  </ion-slide>

</ion-slides>

the first slider working perfect, but second slider one totally broke, i try to slide second slider, but it only slide half of slide, and it will cause first slider to slide…

1 Like
2

i am quite new to ionic, but when i look at your code, the opening is missing.
Out of curiosity i copied your code in a test project of mine,
added the opening and everything works great.
Here is the code: ( just added the missing )

<ion-slides pager>
 <ion-slide style="background-color: green">
    <h2>Slide 1</h2>
  </ion-slide>

  <ion-slide style="background-color: blue">
    <h2>Slide 2</h2>
  </ion-slide>

  <ion-slide style="background-color: red">
    <h2>Slide 3</h2>
  </ion-slide>

</ion-slides>
<ion-slides pager>

  <ion-slide style="background-color: green">
    <h2>Slide 1</h2>
  </ion-slide>

  <ion-slide style="background-color: blue">
    <h2>Slide 2</h2>
  </ion-slide>

  <ion-slide style="background-color: red">
    <h2>Slide 3</h2>
  </ion-slide>

</ion-slides>
3

Having Same issue. Is there a fix.?
when two or more sliders are added only first one works good the rest are going wrong on swipe.

1 Like
4

i did have the opener, i forget to copy the whole code, sorry for that :slight_smile:

5

still don’t have any result for that

6

Just a hack around is there. You can add swiper to the application and work with a swiper implementation rather than going to ion-slides.
With a wiper we can add more than one slider
http://idangero.us/swiper/get-started/

1 Like
7

Thank You f1r361rd, problem solve to hack… i mean add swiper api plugin to ionic 2, since didn’t find any tutorial i decide to write a tutorial in couple day, i hope will help someone have same issue like me. :1

8

ok, just write a quick tutorial http://etenbo.com/ionic-2-swiper-api-solve-multiple-slides-issue/ hope this will someone have same issue like me. :slight_smile:

9

give error at new version of ionic

10

what error code did you show up

11

This doesn’t solve multiple swipers issue ! Even the code has only one slider.