Ionic 2 slides with sliding header nav like the Rio Olympics app?


Screencast example

As per my screencast above, this is what I’m looking to achieve.

I’ve implemented Ionic 2’s Slides which is based on Swiper -, however I am yet to find a way for the header nav to work in the way that the Rio app does where it slides the header nav item on slide change (setting an active class to the current nav item) and is also clickable to change to its corresponding slide.

Previously when I was using the deprecated ion-slide-box I was able to do it, but there doesn’t seem to be much documentation or examples for Ionic 2 mixed with Swiper. Previous would do something like this;

Does any one have a CodePen or something they can share that is similar, if not exactly the same, as the screencast I’ve provided?

Thank you


Hi, sorry to exhume this old post but I haven’t found anything more similar to my issue.

I’m trying to do the exact same thing but haven’t found a way to do it with Ionic 2, have you ever solved it?