Ionic 3 coverflow implemention

650 Views Asked by At

Hi everybody i am working on ionic 3 application. I need to have a cover-flow like this: react coverflow

I have searched so many places but couldn't find one for ionic 2 or above. i also tried a "jquery coverflow" and "swiper" but i dont know how to call a function from the javascript file.

can any one help me to 1. import and use Swiper in ionic 2 or above. 2. import and use javascript files without using npm.

Thanks in advance.

2

There are 2 best solutions below

0
JoeriShoeby On

You are able to use the ion-slides from Ionic themselves. And because it is build on top of Swiper, you are able to pass in every option found in their docs. You should take a look at it. More info about the use of ion-slides take a look at Slides documentation.

0
Sergey Rudenko On

Joeri is correct, you can use ion-slides. Check inline documentation here in this code: https://github.com/ionic-team/ionic/blob/master/src/components/slides/slides.ts

Specifically lines: 137 and onwards.

What you need to implement (coverflow) can be configured through advanced options.

Check lines 221-225 - the setting you need is in there.

Refer to Ionic documentation on how to enable advanced features: https://ionicframework.com/docs/api/components/slides/Slides/#advanced

Small hint: Now once you will do the code in your component to be able to use those listed methods be aware that if your slides component is wrapped into directive such as ngIfetc - you may have issue with ChildView of slides being "undefined". You need to make sure the component is there to initialize the code. This is something that caused trouble in my case;/