Nested ion-slides / multiple ion-slide-page

I have a ticket for this but I also wondered if anyone in the community could help me.

I am certain I cant be the first person to try to show and hide swipers based on navigation.

We have a scenario where we have multiple ion-slides. We have a nested set of views that has an outer category view, once a slide is clicked it hides its self and shows another ion-slides that has all of the items for that category in it.

This appears to happen intermittently. Some times the page works fine, other times the ion-slides that are not shown during the first load of the page, do not swipe left or right once they are shown.

they partially slide, and then snap back into place. As if there is an error on the index somehow, and its trying to increment or decrement but can not but the error is trapped. I can attach our project if it is necessary.

On this same topic I could not find the proper way to set a handle for the sliders. The ionicSlides.sliderInitialized event appears to get called for each slider on the page. The parameters that are passed into the event do not seem to identify which slider it is, so I had to use the page load order, to set up references to my sliders, so I could do things like set the active index.

I am certain there is a better way to do this but this is what I did:
//Set up to match the order they are called in the HTML
var _sliders = [‘pageSlider’, ‘foodSlider’, ‘beveragesSlider’, ‘dessertsSlider’, ‘beverageCategories’]
var _sliderIndex = 0;
$scope.$on("$ionicSlides.sliderInitialized", function (event, data) {
var _sliderId = _sliders[_sliderIndex];
vm.sliderObj[_sliderId] = data.slider;
vm.sliderObj[_sliderId].id = _sliderId;
_sliderIndex++;
});

Now I am able to access the sliders by vm.pageSlider if I want to do things like change its index from the controller (and not the swipe its self).

What is the right way to get a handle to a particular swiper from the controller?

1 Like