New
New
New
Component
Custom Carousel Pattern with Framer
This is a custom carousel pattern recreated in Framer without any code, from 1x tech website. If you want to see how something like this can be built, feel free to remix the project and explore the horizontal carousel technique.
About the resource
To create the custom carousel pattern, I setup a carousel component using variants. for this, I set up a stacked slides wrapper containing all five slide frames. The wrapper is set to 500% width with relative positioning, and each slide is set to 20% width so the sequence aligns cleanly. I placed two trigger frames on top of the wrapper, one pinned left and one pinned right, so they are clickable.
To display the correct slide on each variant, I used spacer sections outside the wrapper, each at 100% width, and showed or hid them to shift the carousel into place. I also added a progress component to show the active slide and its progress, added custom left and right cursors on the trigger frames, and lastly set up click interactions to transition between variants for a smooth carousel experience.
About the resource
To create the custom carousel pattern, I setup a carousel component using variants. for this, I set up a stacked slides wrapper containing all five slide frames. The wrapper is set to 500% width with relative positioning, and each slide is set to 20% width so the sequence aligns cleanly. I placed two trigger frames on top of the wrapper, one pinned left and one pinned right, so they are clickable.
To display the correct slide on each variant, I used spacer sections outside the wrapper, each at 100% width, and showed or hid them to shift the carousel into place. I also added a progress component to show the active slide and its progress, added custom left and right cursors on the trigger frames, and lastly set up click interactions to transition between variants for a smooth carousel experience.
About the resource
To create the custom carousel pattern, I setup a carousel component using variants. for this, I set up a stacked slides wrapper containing all five slide frames. The wrapper is set to 500% width with relative positioning, and each slide is set to 20% width so the sequence aligns cleanly. I placed two trigger frames on top of the wrapper, one pinned left and one pinned right, so they are clickable.
To display the correct slide on each variant, I used spacer sections outside the wrapper, each at 100% width, and showed or hid them to shift the carousel into place. I also added a progress component to show the active slide and its progress, added custom left and right cursors on the trigger frames, and lastly set up click interactions to transition between variants for a smooth carousel experience.
The custom carousel component and its variants.
The custom carousel component and its variants.
The custom carousel component and its variants.
