0
1
00:00:02,760 --> 00:00:03,060
All right.
1

2
00:00:03,070 --> 00:00:03,820
Welcome back.
2

3
00:00:03,820 --> 00:00:07,930
In this video, we will finally take care of those arrows on the slider. In the previous video,
3

4
00:00:07,930 --> 00:00:12,940
we have learned an important technique, that will be useful in order to properly position these arrows.
4

5
00:00:12,970 --> 00:00:16,740
For starters, we're going to replace the arrow icons with our own icons.
5

6
00:00:16,750 --> 00:00:21,850
We can do that simply by deleting existing icon and inserting image element in their place.
6

7
00:00:26,050 --> 00:00:31,600
Just drag an image element inside the arrow block and insert the arrow image, which we're going to export
7

8
00:00:31,600 --> 00:00:32,230
from Figma.
8

9
00:00:58,900 --> 00:01:18,290
And the same goes for the right arrow.
9

10
00:01:18,320 --> 00:01:23,690
Now we're going to need position feature, to place these arrows on the bottom. If you have a look at the
10

11
00:01:23,690 --> 00:01:27,080
position settings it's already set to Absolute by default.
11

12
00:01:27,500 --> 00:01:29,410
Unlike the usual Static position.
12

13
00:01:29,690 --> 00:01:33,080
And that explains why the arrows are sitting on top of the slider.
13

14
00:01:33,110 --> 00:01:34,910
That's what Absolute positioning does.
14

15
00:01:34,910 --> 00:01:37,700
It yanks the element out of the page flow.
15

16
00:01:37,730 --> 00:01:40,770
They live on a different dimension, like layers in Figma.
16

17
00:01:40,850 --> 00:01:42,210
This is exactly what we need.
17

18
00:01:42,250 --> 00:01:45,240
Absolute position with a bottom right placement.
18

19
00:01:45,260 --> 00:01:50,210
Once you press on bottom right position, the arrow will be placed on the bottom right corner of the
19

20
00:01:50,210 --> 00:01:51,470
slider element.
20

21
00:01:51,470 --> 00:01:55,720
Now why the slider element? Because it's the first parent that doesn't have a static position.
21

22
00:01:55,730 --> 00:02:00,830
Remember the trick? Absolute element is relative to first non Static parent.
22

23
00:02:00,860 --> 00:02:03,750
If there is no such parent, then it will be relative to the body.
23

24
00:02:03,860 --> 00:02:08,750
In that case, it would jump on the bottom of the page. So if you see it doesn't work the way you expect it.
24

25
00:02:09,170 --> 00:02:11,950
Check the parent and make sure it's set to relative.
25

26
00:02:11,960 --> 00:02:14,930
From here we can easily position it exactly where we want it.
26

27
00:02:15,170 --> 00:02:22,560
Let's check the design to see the distances. Arrows are 60 pixel below the slider.
27

28
00:02:22,570 --> 00:02:28,170
Now here's an interesting part, we need to add 60 pixels in one of these position values, but which one?
28

29
00:02:28,450 --> 00:02:30,240
Let's try all of them and see what happens.
29

30
00:02:59,450 --> 00:03:00,640
None of this actually work.
30

31
00:03:00,640 --> 00:03:01,490
Why?
31

32
00:03:01,760 --> 00:03:04,850
The arrow is positioned like this, on the bottom right.
32

33
00:03:04,850 --> 00:03:10,490
This means that 0 pixels from the right and 0 pixels from the bottom. The position values tell us exactly
33

34
00:03:10,510 --> 00:03:10,790
this.
34

35
00:03:10,880 --> 00:03:17,630
If we add 60 pixels on the bottom, then it's going to move 60 pixels upwards from the bottom edge. For
35

36
00:03:17,630 --> 00:03:19,300
it to move outside of the slider,
36

37
00:03:19,310 --> 00:03:24,270
then we have to go negative values. Actually it works more like this.
37

38
00:03:24,270 --> 00:03:29,740
It calculates distance between bottom of the slider and the bottom of the arrow block.
38

39
00:03:29,790 --> 00:03:37,120
So often we have to compensate for the height of the element.
39

40
00:03:37,350 --> 00:03:40,710
By the way, make sure you type Px next to 60. By default,
40

41
00:03:40,710 --> 00:03:42,510
as you can see, it says percentage.
41

42
00:03:42,540 --> 00:03:45,690
So the field is set to percentage value.
42

43
00:03:45,690 --> 00:03:48,600
And if you just type 60, it will think you mean 60%.
43

44
00:03:59,600 --> 00:04:05,880
Now let's apply the same class to the second arrow, so we don't have to do all these changes again.
44

45
00:04:16,700 --> 00:04:18,830
Let's move the left arrow towards the left.
45

46
00:04:18,830 --> 00:04:23,480
We can do that by putting some value in the right position. But before we do that, let's give the
46

47
00:04:23,480 --> 00:04:24,940
left arrow a combo class.
47

48
00:04:25,100 --> 00:04:29,130
Otherwise the changes will be applied to both of them.
48

49
00:04:29,160 --> 00:04:34,620
Again, we are putting value in the right, because we are telling it to move away this amount from the
49

50
00:04:34,620 --> 00:04:35,340
right edge.
50

51
00:04:35,610 --> 00:04:36,090
Excellent.
51

52
00:04:36,090 --> 00:04:38,190
Let's check the preview and see how it works.
52

53
00:04:46,120 --> 00:04:47,130
There is just one issue.
53

54
00:04:47,130 --> 00:04:51,620
If you take a closer look at the arrow blocks, you'll see that they are sort of overlapping.
54

55
00:04:51,660 --> 00:04:55,680
The boxes are a little too wide. And in the preview the entire box is clickable.
55

56
00:04:55,770 --> 00:05:00,990
So user is able to interact with the empty space too. A little bit of interaction with empty space is
56

57
00:05:00,990 --> 00:05:06,330
good, so user doesn't have to be so precise at aiming the arrow. But too much, makes it odd.
57

58
00:05:06,330 --> 00:05:10,380
Plus overlapping will cause some issues as these are links. To fix this,
58

59
00:05:10,380 --> 00:05:13,490
we need to change the width of the arrow blocks. In the width,
59

60
00:05:13,500 --> 00:05:15,810
it says it's auto, but that's not really true.
60

61
00:05:15,810 --> 00:05:18,670
There is some default width applied to it, that we're not seeing.
61

62
00:05:18,780 --> 00:05:24,150
Let's give it some size.
62

63
00:05:24,310 --> 00:05:26,080
I think 40 pixels is good.
63

64
00:05:26,080 --> 00:05:28,870
I have styled the right arrow, which has the base class.
64

65
00:05:28,870 --> 00:05:36,520
That way both of the arrows were updated at the same time, because of the linked base class.
65

66
00:05:36,570 --> 00:05:38,270
There's one more thing we can do with arrows.
66

67
00:05:38,280 --> 00:05:40,110
We can hide them on each end.
67

68
00:05:40,110 --> 00:05:45,370
We can do that from the slider settings.
68

69
00:05:45,380 --> 00:05:50,540
This is actually a better user experience, that way user knows which way they can slide. And see when
69

70
00:05:50,540 --> 00:05:52,310
the testimonials have reached the end.
70

71
00:05:55,600 --> 00:05:58,840
Let's check the responsiveness to make sure it all looks great there too.
71

72
00:06:00,860 --> 00:06:03,530
And we have just one last action left. The footer. We'll do that
72

73
00:06:03,530 --> 00:06:04,220
up next.
73

74
00:06:04,280 --> 00:06:04,850
Stick around.