00:00hi everyone in this video i'm going to show you how to create these types of slider using framer
00:06we will use the slideshow component to make this one and we will create this one from scratch
00:11don't worry we're not going to use any code i'll also share both remix links in the description
00:18so you can play around with them i'm imran from cycloto and let's get started
00:24first let's create a project and close this then go to layers desktop make it stack now upload all our
00:32images
00:38let's arrange all the images
00:51now click this insert search for slideshow
00:57click here and then drag this and drop it to the desktop set the width 600 height 400
01:07it select all the images like this radius 20 then click here click this three dot
01:17drop the line here like this
01:25preview the slider it's ready but let's adjust the values to match our project's design as you can see
01:40but here we can't see the other images around the slider so let's make the overflow visible
01:48click here scroll down clipping overflow show now let's see
01:58that's done
02:05now let's remove the dots these dots and this arrow click here arrows show no dots show no
02:18and that's also done
02:22finally just like in our project
02:25we need to show the other images with the kind of 3d rotation effect so to do this click here
02:33effects rotation add value 40 now let's preview our project
02:39and that's it we have made the slider
02:43now let's make the background darker and add our text
02:46so for this click here and wrap this slideshow into another stack by pressing ctrl alter enter name
02:53it container or anything you would like set the height viewport 100vh now click this desktop
03:01fill change the color to black press t on your keyboard to add text paste this text select it this
03:08is our text change the font to satoshi size 60 change the color to white drag it and drop it
03:21to the container
03:21click this container direction vertical add some gap maybe 100 now click this text break it into a two line
03:30and select it change the font to instrumental serif
03:37weight italic also select it
03:43weight italic align center let's preview to see if we missed anything
03:55nope everything looks perfect now let's create our second slider
04:01again close it then layers desktop layout on our project as you can see it's a scroll based variant
04:10slider so for this we will create a component and then add a few additional variants press f on our
04:18keyboard to add a frame and draw a frame like this set the width 12 000 pixel height 500 right
04:26click on it
04:27create component name it is scroll slider again make it stack inside this slider we will add our images
04:37let's upload our image
04:41select all add radius 20 then select the first image drag it and drop it to the variant one like
04:50this
04:51as you can see the first image is larger the second one is slightly smaller and it gradually decrease in
04:58size until the last image to achieve this we will reduce the width of the second through the last images
05:04by 50 pixels each make it absolute at first so select the second image this is 6 and it's 5
05:154 3 2 this is the second
05:18drop it here
05:21then select the second image position type absolute decrease the width to 550
05:29then select the first image z index make it 10 and press left arrow on your keyboard
05:37like this zoom in a bit and see the gap 57 we will also add a 50 pixel gap between
05:46them
05:46select the second image now let's see click the first one and press alt on your keyboard to see the
05:53gap
05:54value which is 50 which is 50 pixel now select the third image drop it here
06:00position type absolute set the width 500 again press left arrow on your keyboard select the second image
06:09add z index 9 press alt on your keyboard to see the gap value which is 71
06:17now let's see it's 50 select the fourth one drop it to the variant one position absolute click on the
06:26third image
06:28scroll down add z index 8 then click this 4 move it to the left set the width 450 and
06:39add some gap
06:50click here click here click here add z index 7 now click here and see the gap which is 49
06:58let's add one
07:00perfect finally click on the last image drop it here position absolute width 350 move it to the right
07:10click on the right click on the right click on the 5 add z index 6 perfect now click this
07:18variant one
07:20scroll down fill change the color to black now let's create the second variant click here then click here
07:29to create another variant click this image decrease the wood size to 550
07:36then click here increase it the second image to 600 now click here press left arrow on your keyboard
07:44to move it to the left then click here scroll down set the z index 10 align it center set
07:53the gap 50
07:55press alter to see the gap here which is 26
08:05now it's 50 now it's 50 click here and increase the width to 550 for this 500 450 and finally
08:18for the last one 400
08:21then select all and press left arrow on your keyboard to move it to the left
08:34repeat this process for each variant
08:58all right we have created our variants now let's go to the home we will make the slider images changes
09:05as we scroll so let's add some empty frame this will act as our trigger when it reaches the canvas
09:11the variant will change we will add a trigger frame for every images except the first one since it's
09:18already on the canvas so five frames in total let's do it so you can understand it better wrap this
09:24component into a stack by pressing ctrl alt enter then name it container
09:31to get the scroll effect we will set really long height like five or six thousand pixel so let's add
09:38fixed height go to the desktop height fit content now click this container align start we will also
09:47make the component sticky so it sticks on the canvas while we scroll click this scroll slider
09:54change the position type to sticky now let's add frame i mean the triggers press f on our keyboard
10:00to add a frame and draw a frame like this drag it and drop it here change the position type
10:07to absolute
10:08set the top height 800 maybe let's see and name it one now duplicate this four more time by pressing
10:17ctrl
10:17plus d change the name here to two three four and five select the second one set the position
10:29one thousand six hundred click on the third two thousand four hundred click on the four three thousand two
10:38hundred and finally four thousand so here we need to define the trigger using scroll section if we don't
10:47the scroll variant won't recognize the trigger or the action so click here scroll down scroll section name it
10:56one then click here the two name it two three four lastly five then click this scroll slider this component
11:15effects scroll variant trigger section in view viewport center select the section one set the variant
11:26to add section section two variant three section three variant four section four variant five finally
11:43let's give it a preview to see if it's working or not yes it's working as you can see
11:58finally let's add the text this text and make the background color black also we need to remove the
12:06fill color here as you can see this color now drag this text drop it here select both these two
12:20and wrap them
12:21into another stack name it content or anything you would like change the direction to vertical click this
12:30click this container scroll down fill and let's add black background click this content set the height
12:39viewport 100vh 100vh in the viewports means it takes up the full height of your screen no matter what
12:46device you're on now let's remove this we got some issue here so let's fix it our stick isn't working
12:55as you can see when you wrap it inside a parent layer the sticky behavior switches to relative so
13:01instead of setting the components to sticky we can make the parent layer sticky it will stick the full
13:08frame so let's make the parent layer sticky this content change the position type to sticky and let's see
13:16yes it's working as expected now let's remove this fill color here
13:25this fill color and let's see
13:32perfect this is how you can easily create a custom slider
13:35you can use this as inspiration to design something even better
13:38the remix links is in the description thanks for watching see you in the next video inshallah
Comments