Ionic two slider in same page issue


#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…


#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.


#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/


#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.