Multiple sliders in one page

I’m having a problem with ionic slider. I have a ngFor that creates a slider with multiples slides per item, but when I click in the next button the function is triggered in all the sliders. I think that it’s a problem with the instances of the sliders, but I can’t solve it, all the examples shows only one slider in the page.

Example code:

<div *ngFor="let carouselItem of carousel">
    <ion-content class="slider">
        <ion-slides [options]="sliderConfiguration">
            <ion-slide *ngFor="let item of carouselItem.person; let i=index;">
                <div class="image-thumb">
                    <img *ngIf="item.image" src="{{item.image}}">
                </div>
                <h4>{{item.name}}</h4>
            </ion-slide>
        </ion-slides>
        <div class="button-next"></div>
        <div class="button-prev"></div>
     </ion-content>
 </div>

Thanks!

1 Like

+1 the same.
I have an implementation of android like sliding tabs using two sliders for header and content.
Broken after latest update :frowning:

You should not be using multiple ion-contents in one page.
Chances are you’re using an old setup of slides that is not valid in the new release.
Please build a plnkr demo that we can look at

Here I created two differents sliders, and if you try to use the second one, it doesn’t work. I didn’t use ngFor but it’s the same as if I had used it. Also, I tried to add configuration to the sliders, such as slides per view and it didn’t work.

I don’t know what is happening here

Does this happen to you if you emulate device mode? We have an e2e test here that uses 2 sliders and I am able to reproduce it in Chrome but not in device mode: https://github.com/driftyco/ionic/tree/master/src/components/slides/test/loop

I believe it is related to this issue, since I’m seeing something similar:

Finally it works!

Thanks for “freemode” options (centeredSlides = true )

Cheers!

Hi, first off thanks for this awesome framework! I wanted to know is there any update on the following issues regarding the slider:

Is there a way to make it work on desktop mode? Here is a simple plunkr with the same problem: http://plnkr.co/edit/LmKJUPstyxa3W9cqnby8?p=preview
I hosted my ionic app online and in chrome the sliders are working in device mode but not in normal mode.

On android by installing the app with an apk, the sliders are working fine for some time then they also have sliding issues after navigating in the app for a while going back and forth like explained in this post: Slider Issue when navigating back to the slider page
Any idea how I can solve this issue?

Hi all, I was able to solve this by doing this trick:

<div *ngFor="let carouselItem of carousel; let i=index;">
    <div class="button-next-{{+i}}"></div>
    <div class="button-prev-{{+i}}"></div>
    <ion-content class="slider">
        <ion-slides [options]="{slidesPerView: 3, pager, false, nextButton: 'button-next'+i, prevButton: 'button-prev'+i}">
            <ion-slide *ngFor="let item of carouselItem.person">
                <div class="image-thumb">
                    <img *ngIf="item.image" src="{{item.image}}">
                </div>
                <h4>{{item.name}}</h4>
            </ion-slide>
        </ion-slides>
     </ion-content>
</div>

Doing like this, you create differents next and prev buttons for each slider, using the index of the first loop.

Hi I am trying to make your solution work in the plunkr but getting some errors. I wanted to know what version of ionic are you using as if I remember correctly <ion-slides [options]="{slidesPerView: 3, pager, false, nextButton: 'button-next'+i, prevButton: 'button-prev'+i}"> this is deprecated.

Hi, how are you? Im using Ionic 2.2.1 and it works great.

Ok thanks, it’s not working in plunker it might be because of the ionic version (http://plnkr.co/edit/sHS34YrjpXouK8Rr2DqQ?p=preview).
I’ll give it a try when updating my personal project to the latest version, but it’s weird that you have several ion-content in your code.

Yes, this was only a test, I replaced this tag when I found a solution to my problem. Anyway, I can’t see your plunkr, it doesn’t display anything, maybe its because its a private one.

Nope it’s not private, the plunker is not loading cause there are errors, you can see them in the console. Don’t worry for the plunker it was just for testing purpose, it’s not working probably because of the ionic version. Are you doing anything in particular in your css files or is it just for styling? I was wondering that as your solution have lots of classes. Anyways I’ll try to test different things and update this post if your solution works in my project. Thanks for your help!

Ok, no problem! The classes are to add a better look to the divs. The solution I found was to use the index of the first loop, to create a unique class for each next-button and prev-button slider. So, you will have next-button-1, next-button-2, next-button-3. The problem was that all the sliders had the same next-button class, so when I trigger one, I was triggering all of them. Try to generate a unique class for each button and that’s all. If you need help. tell me.

Tried your solution on my project, no luck, the sliders are still not working on desktop mode. Anyways, thanks for your time :slight_smile:

Yes, the [options] tag is deprecated for recent versions, also desktop version for Ionic is new, I found this link, take a look: http://ionicframework.com/docs/resources/desktop-support/

1 Like