Website
Horizontal Slide Site in Framer
Created by
About The Resource
I knew it wasn't going to be too hard to achieve this in Framer because I could create a component where each variant shows a new slide, and I could move between them with interactions connected from the arrow buttons.
However, I had to be a little tricky if I wanted each slide to take up 100% of the given viewport width. If we want to set a single frame to 100% viewport width, we simply set its width to "fill." But what if we have multiple frames right next to each other (these are the slides)? How can we ensure that each of those frames takes up 100% of the given viewport width?
Unfortunately, Framer doesn't support a viewport width unit; only viewport height is available for height.
So, the trick I came up with is to set the wrapper to 3*100=300% (number of slides multiplied by 100). This way, the wrapper's width will always be three times the viewport width. Then, I place three frames within the wrapper next to each other (these are the slides) and set their width to 33% (100 divided by the number of slides).
About The Resource
I knew it wasn't going to be too hard to achieve this in Framer because I could create a component where each variant shows a new slide, and I could move between them with interactions connected from the arrow buttons.
However, I had to be a little tricky if I wanted each slide to take up 100% of the given viewport width. If we want to set a single frame to 100% viewport width, we simply set its width to "fill." But what if we have multiple frames right next to each other (these are the slides)? How can we ensure that each of those frames takes up 100% of the given viewport width?
Unfortunately, Framer doesn't support a viewport width unit; only viewport height is available for height.
So, the trick I came up with is to set the wrapper to 3*100=300% (number of slides multiplied by 100). This way, the wrapper's width will always be three times the viewport width. Then, I place three frames within the wrapper next to each other (these are the slides) and set their width to 33% (100 divided by the number of slides).
About The Resource
I knew it wasn't going to be too hard to achieve this in Framer because I could create a component where each variant shows a new slide, and I could move between them with interactions connected from the arrow buttons.
However, I had to be a little tricky if I wanted each slide to take up 100% of the given viewport width. If we want to set a single frame to 100% viewport width, we simply set its width to "fill." But what if we have multiple frames right next to each other (these are the slides)? How can we ensure that each of those frames takes up 100% of the given viewport width?
Unfortunately, Framer doesn't support a viewport width unit; only viewport height is available for height.
So, the trick I came up with is to set the wrapper to 3*100=300% (number of slides multiplied by 100). This way, the wrapper's width will always be three times the viewport width. Then, I place three frames within the wrapper next to each other (these are the slides) and set their width to 33% (100 divided by the number of slides).
Slide site strucutre.
Slide site strucutre.
Slide site strucutre.
This structure will basically ensure that the slides always take up 100% of the given viewport width.
To ensure we're displaying the correct slide on each variant, I used spacer sections outside of the wrapper set to 100% width. By showing and hiding these spacer sections, we can move the slides around as desired.
Be sure to check out the detailed tutorial for more insights and remix the project to see it for yourself.
This structure will basically ensure that the slides always take up 100% of the given viewport width.
To ensure we're displaying the correct slide on each variant, I used spacer sections outside of the wrapper set to 100% width. By showing and hiding these spacer sections, we can move the slides around as desired.
Be sure to check out the detailed tutorial for more insights and remix the project to see it for yourself.
This structure will basically ensure that the slides always take up 100% of the given viewport width.
To ensure we're displaying the correct slide on each variant, I used spacer sections outside of the wrapper set to 100% width. By showing and hiding these spacer sections, we can move the slides around as desired.
Be sure to check out the detailed tutorial for more insights and remix the project to see it for yourself.
