One common request in Fastr Frontend is around creating a carousel that smoothly scrolls, without needing to change scenes. Please review this example:
Example Infinite Smooth Scroll Carousel
Please note that we have changed the code for how these carousels are created. If you are using an older version of the Smooth Scroll Carousel, we recommend reaching out to support@getfastr.com
The first step for creating a smooth scroll carousel is to contact support@getfastr.com. Our team will add some custom code to your account which will allow you to manage your smooth scroll carousels. After the support team has confirmed that the smooth scroll carousel code is available in your account, you can follow these steps:
Creating a smooth scroll carousel
- This type of carousel is different from a standard carousel, as it does not required a separate experience to embed. Instead, you will want to add a horizontal board widget directly in your main experience. You will need to make sure that this board is placed inside of a group with the label "smooth-scroll". You can see this in the following screenshot:
- The second requirement for building this carousel is to make sure your "smooth-scroll" board (not the group, but the board inside the group) is using a Flex layout. This can be applied by clicking on the following option in the Design Tab:
- Next, scroll down to the 'Data Provider' option within the Design section. Click the '+' icon next to 'Data Provider', then select the three dots beside it to open the dropdown menu. From there, click on the three dots next to the Integration Step option, access its dropdown menu, and select 'Smooth Scroll' under the Integration option.
- With these three steps, the smooth scroll carousel should be all set. You can preview the experience to see the scroll effect occurring. The scroll bar color can be modified by requesting support to change the integration code. You could also request for the scroll bar to be hidden
If you have any issues, please reach out to support@getfastr.com
Comments
0 comments
Please sign in to leave a comment.