• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Different size carousel

New Here ,
Nov 14, 2021 Nov 14, 2021

Copy link to clipboard

Copied

Hi all, 

I try to google all about this question, but I can't find any soultion. 

 

Do you know how to do a carousel, but it come with different size and with animation when we swipe on screen. 

 

Here is the image:

LiYang5E9E_0-1636953695327.pngLiYang5E9E_1-1636953707019.png

This is just a example. As you can see the left and right pictures are smaller than the middle one. 

Therefore, how do we moothly display when we swipe to the left? 

(BTW, I'm doing prototype)

 

Thank you  

TOPICS
Design , How to , Prototyping

Views

282

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Nov 14, 2021 Nov 14, 2021

1. Add a drag interaction to the group with the slides, that points to the second artboard, and set the action to "auto-animate". This will create a smooth transition as you drag from one artboard to the next.

2. On the second artboard, move the group with the slides to the left, and match the smaller image to the "active" image (make it a bit bigger, add the overlay / text). At the same time, the image that was in view should lose the overlay and become smaller like the one on the left.

 

This tutorial

...

Votes

Translate

Translate
Community Expert ,
Nov 14, 2021 Nov 14, 2021

Copy link to clipboard

Copied

LATEST

1. Add a drag interaction to the group with the slides, that points to the second artboard, and set the action to "auto-animate". This will create a smooth transition as you drag from one artboard to the next.

2. On the second artboard, move the group with the slides to the left, and match the smaller image to the "active" image (make it a bit bigger, add the overlay / text). At the same time, the image that was in view should lose the overlay and become smaller like the one on the left.

 

This tutorial shows exactly your use case.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines