Carousel like behaviour

[Sanyos]

Hi guys!

I'm a bit stuck on displaying some data with images. The problem i'm having follows:

I can't make any CR for the backend so the data i'm working with is fix. I'm getting an object of array with the following structure:
[
{
id: number,
name: string,
desc: sring,
image string, //as a valid url
},
....
]

I need to display the content of the array as seen on the attached beautifulpaint art done by me :) Basically the intended way this works:

This is a component where the user can choose one from multiple gifts.

We have 3 "slots" a previous, an active and a next slot. Both the prev and next slots are smaller than the active slot, and they only display half of the image (or the full image but half of it is pushed out of screen). Also the inactive slots have their image graysacled or displayed with 0.5 opacity. (Should be grayscale but in the app i have gray background so the opacity has the same effect).

The active image has 100% height, has no image transformation and it has all the data written under it also a button. If the button is tapped on the .ts side i need to know all the data from the active element.

Also on left or right swipe the elements should rotate in the correct direction (like scrolling a ScrollView).

I can make a layout that looks like this, also on swipe i can switch the active image and correctly display the prev and next image via keeping track on the active index of the array.
But i cant animate it and also can not crop the inactive images to half.

So my questions:
Is there any method to display only half of the image?
Can i somehow use ScrollView to achive this scrolling functionality?Or is there a better way?

[vallemar]

you can use this plugin and pass it custom transformers based on whether it's iOS or Android https://github.com/nativescript-community/ui-pager for android uses viewpager2 and for iOS uicollectionview. I have done what you say works on android. in iOS I did not get to implement it. here is how to pass a transformer for android https://github.com/vallemar/nativescript-stack-slide-pager-animation/blob/master/src/components/Home.vue#L35

[asharghi]

I made something similar for a client project. Some of the code should be relevant for you: https://stackblitz.com/edit/nativescript-stackblitz-templates-xg7gne

[farfromrefug]

@asharghi nice example! I should mention though that there is a big difference. You component will renders all pages from the start which will be slow if pages get complex and numerous. This is the point of the pager component to only render pages when needed.

[asharghi]

Good point, my component is not ment for whole pages. It's more useful for an item selector. And from my understanding of this post he is not going to render whole pages in those slots.

[telekisandor]

Thanks @asharghi this solution seems to be wroking for me. I'll only use this component to display a few (10 tops) gifts to choose from (1 picture and a small text) so the memory issue is not a problem for now.
Now i just have to implement it in Angular. :D If for reasons i fail to do that i'll keep posting :)
Thanks again!

[asharghi]

Glad it helped! Suggest you to mark this post as answered and join the Discord server for any follow up questions. https://nativescript.org/discord :) See you there!