All right. 1
So now we need to build the testimonial section. 2
We've decided to use this sort of slider. Sometimes called carousel or just slider or carousel slider. 3
To build that in Webflow. 4
We need to use a very handy component called logically... a slider. 5
In this video, we're going to get to know to the slider component and then we'll finish up the testimonial 6
section in later video. 7
Let's start with the usual - section, container, 8
so on. 9
Then add a heading. 10
Now let's add a slider, which we can find under component section. 11
Or just searching inside a quick finder. 12
This is a slider, a premade component, which has a lot of freedom to be customized. But it does have its 13
limitations sometimes. As almost with everything in Webflow, premade components aren't the only way to 14
create such layouts or components. 15
We could build our own slider, from scratch. But it's a bit more work in this premade slider does a damn 16
good job for most of the time. 17
Slider takes up a full width of its parent container. 18
So if we move it right on the body, outside of our container and the section, then it will stretch edge 19
to edge. Let's see what it's made of. 20
There are 4 elements inside. 21
First is mask. 22
This is where our slides go. 23
Right now there are 2 default slides inside. 24
Of course we're not limited to 2. 25
Then we have a left and right arrows, which are link blocks with an arrow icons inside. 26
And the last we have, the slider navigation. 27
These are the white dots, that you see in the middle. 28
They are clickable and we'll take you to the corresponding slide. 29
The slide itself is just a good old div block. 30
Nothing particularly special about them. 31
They can be styled as any other div block and we can drop any other element inside them. 32
Let's change the background of each slide, so we can see better what's going on. 33
Let's check that in the preview mode. 34
2 slides, red and blue. Arrows and the navigation dots switch between these slides. 35
Basically what's happening is that there are 2 div blocks sitting next to each other horizontally and 36
controls move between these div blocks, with some animation. 37
That's all. 38
There are multiple ways we can switch between the slides, inside the designer. 39
We can't do that by using controls, but we can switch by directly selecting the slide from the navigator. 40
Or from the slider settings, which has its own arrows. Or from this dropdown, where we can select exactly 41
the slide we want. 42
That's how we switch between the slides, so we can edit them individually. 43
We have two options to add slides. 44
First, we can add a new slide from the settings panel. By pressing add slide. To be able to see the slider 45
settings, you have to have some element of the slider selected. As you can see now we have three slides. 46
This has added a new slide div block inside the navigator too. The second option is to duplicate the slide 47
element. Either by right click and duplicate, or the usual CTRL-C, CTRL-V. Deleting slides happens 48
in a similar way, select a slide either on the canvas or in the navigator and hit delete key. Since the 49
slide is just a regular div block, we can add other elements inside. Like text, images, buttons and so on. 50
We have just added this into the first slide. The second blue slide is going to be empty. We can add similar 51
or different content in the blue slide too. 52
So that's the slider. In the next video, we're going to turn that ugly slider into pretty carousel made 53
of testimonial cards.