Horizontal Slide Site in Framer

Horizontal Slide Site in Framer

Website

Horizontal Slide Site in Framer

This is a website in Framer that looks like a slide, inspired by the Midday website, made without any code. Feel free to remix the project and learn how to set up your website to get that horizontal presentation feel.

image of Nandi Muzsik

Created by

Horizontal Slide Site in Framer
Horizontal Slide Site in Framer
Horizontal Slide Site in Framer

Related Lesson

Related Lesson

Related Lesson

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 setup

Slide site strucutre.

slide site setup

Slide site strucutre.

slide site setup

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.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

    Circular Animated Hero Section in Framer

    Circular Animated Hero Section in Framer

    Website

    Circular Animated Hero Section in Framer

    Circular Animated Hero Section in Framer

    Website

    Circular Animated Hero Section in Framer

    Circular Animated Hero Section in Framer

    Website

    Negative Gap in Framer (Without Code)

    Negative Gap in Framer (Without Code)

    Website

    Negative Gap in Framer (Without Code)

    Negative Gap in Framer (Without Code)

    Website

    Negative Gap in Framer (Without Code)

    Negative Gap in Framer (Without Code)

    Website