0
1
00:00:02,880 --> 00:00:03,290
All right.
1

2
00:00:03,320 --> 00:00:05,850
So now we need to build the testimonial section.
2

3
00:00:05,850 --> 00:00:12,050
We've decided to use this sort of slider. Sometimes called carousel or just slider or carousel slider.
3

4
00:00:12,110 --> 00:00:13,580
To build that in Webflow.
4

5
00:00:13,580 --> 00:00:17,670
We need to use a very handy component called logically... a slider.
5

6
00:00:17,720 --> 00:00:22,280
In this video, we're going to get to know to the slider component and then we'll finish up the testimonial
6

7
00:00:22,280 --> 00:00:24,400
section in later video.
7

8
00:00:24,410 --> 00:00:26,930
Let's start with the usual - section, container,
8

9
00:00:26,930 --> 00:00:27,440
so on.
9

10
00:00:47,420 --> 00:00:56,890
Then add a heading.
10

11
00:00:56,970 --> 00:01:00,660
Now let's add a slider, which we can find under component section.
11

12
00:01:05,510 --> 00:01:12,250
Or just searching inside a quick finder.
12

13
00:01:12,280 --> 00:01:17,590
This is a slider, a premade component, which has a lot of freedom to be customized. But it does have its
13

14
00:01:17,590 --> 00:01:22,570
limitations sometimes. As almost with everything in Webflow, premade components aren't the only way to
14

15
00:01:22,570 --> 00:01:25,880
create such layouts or components.
15

16
00:01:25,930 --> 00:01:31,420
We could build our own slider, from scratch. But it's a bit more work in this premade slider does a damn
16

17
00:01:31,420 --> 00:01:32,950
good job for most of the time.
17

18
00:01:33,040 --> 00:01:35,360
Slider takes up a full width of its parent container.
18

19
00:01:35,380 --> 00:01:40,780
So if we move it right on the body, outside of our container and the section, then it will stretch edge
19

20
00:01:40,780 --> 00:01:44,140
to edge. Let's see what it's made of.
20

21
00:01:45,590 --> 00:01:47,570
There are 4 elements inside.
21

22
00:01:47,570 --> 00:01:49,180
First is mask.
22

23
00:01:49,190 --> 00:01:50,810
This is where our slides go.
23

24
00:01:50,810 --> 00:01:53,690
Right now there are 2 default slides inside.
24

25
00:01:53,690 --> 00:01:55,310
Of course we're not limited to 2.
25

26
00:01:55,700 --> 00:02:01,100
Then we have a left and right arrows, which are link blocks with an arrow icons inside.
26

27
00:02:01,100 --> 00:02:03,560
And the last we have, the slider navigation.
27

28
00:02:03,560 --> 00:02:06,430
These are the white dots, that you see in the middle.
28

29
00:02:06,440 --> 00:02:09,890
They are clickable and we'll take you to the corresponding slide.
29

30
00:02:12,780 --> 00:02:15,180
The slide itself is just a good old div block.
30

31
00:02:15,270 --> 00:02:17,600
Nothing particularly special about them.
31

32
00:02:17,640 --> 00:02:22,740
They can be styled as any other div block and we can drop any other element inside them.
32

33
00:02:22,740 --> 00:02:26,620
Let's change the background of each slide, so we can see better what's going on.
33

34
00:02:36,970 --> 00:02:38,440
Let's check that in the preview mode.
34

35
00:02:39,890 --> 00:02:45,130
2 slides, red and blue. Arrows and the navigation dots switch between these slides.
35

36
00:02:45,170 --> 00:02:50,510
Basically what's happening is that there are 2 div blocks sitting next to each other horizontally and
36

37
00:02:50,510 --> 00:02:53,710
controls move between these div blocks, with some animation.
37

38
00:02:53,780 --> 00:02:55,010
That's all.
38

39
00:02:55,010 --> 00:02:59,180
There are multiple ways we can switch between the slides, inside the designer.
39

40
00:02:59,180 --> 00:03:04,640
We can't do that by using controls, but we can switch by directly selecting the slide from the navigator.
40

41
00:03:05,570 --> 00:03:13,630
Or from the slider settings, which has its own arrows. Or from this dropdown, where we can select exactly
41

42
00:03:13,630 --> 00:03:14,800
the slide we want.
42

43
00:03:14,800 --> 00:03:20,630
That's how we switch between the slides, so we can edit them individually.
43

44
00:03:20,660 --> 00:03:22,490
We have two options to add slides.
44

45
00:03:22,490 --> 00:03:28,440
First, we can add a new slide from the settings panel. By pressing add slide. To be able to see the slider
45

46
00:03:28,460 --> 00:03:34,230
settings, you have to have some element of the slider selected. As you can see now we have three slides.
46

47
00:03:34,280 --> 00:03:40,550
This has added a new slide div block inside the navigator too. The second option is to duplicate the slide
47

48
00:03:40,580 --> 00:03:47,810
element. Either by right click and duplicate, or the usual CTRL-C, CTRL-V. Deleting slides happens
48

49
00:03:47,810 --> 00:03:55,500
in a similar way, select a slide either on the canvas or in the navigator and hit delete key. Since the
49

50
00:03:55,500 --> 00:04:01,460
slide is just a regular div block, we can add other elements inside. Like text, images, buttons and so on.
50

51
00:04:08,510 --> 00:04:14,180
We have just added this into the first slide. The second blue slide is going to be empty. We can add similar
51

52
00:04:14,180 --> 00:04:16,130
or different content in the blue slide too.
52

53
00:04:20,780 --> 00:04:26,360
So that's the slider. In the next video, we're going to turn that ugly slider into pretty carousel made
53

54
00:04:26,360 --> 00:04:27,470
of testimonial cards.