All right. 1
Welcome back. 2
In this video, we will finally take care of those arrows on the slider. In the previous video, 3
we have learned an important technique, that will be useful in order to properly position these arrows. 4
For starters, we're going to replace the arrow icons with our own icons. 5
We can do that simply by deleting existing icon and inserting image element in their place. 6
Just drag an image element inside the arrow block and insert the arrow image, which we're going to export 7
from Figma. 8
And the same goes for the right arrow. 9
Now we're going to need position feature, to place these arrows on the bottom. If you have a look at the 10
position settings it's already set to Absolute by default. 11
Unlike the usual Static position. 12
And that explains why the arrows are sitting on top of the slider. 13
That's what Absolute positioning does. 14
It yanks the element out of the page flow. 15
They live on a different dimension, like layers in Figma. 16
This is exactly what we need. 17
Absolute position with a bottom right placement. 18
Once you press on bottom right position, the arrow will be placed on the bottom right corner of the 19
slider element. 20
Now why the slider element? Because it's the first parent that doesn't have a static position. 21
Remember the trick? Absolute element is relative to first non Static parent. 22
If there is no such parent, then it will be relative to the body. 23
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
Check the parent and make sure it's set to relative. 25
From here we can easily position it exactly where we want it. 26
Let's check the design to see the distances. Arrows are 60 pixel below the slider. 27
Now here's an interesting part, we need to add 60 pixels in one of these position values, but which one? 28
Let's try all of them and see what happens. 29
None of this actually work. 30
Why? 31
The arrow is positioned like this, on the bottom right. 32
This means that 0 pixels from the right and 0 pixels from the bottom. The position values tell us exactly 33
this. 34
If we add 60 pixels on the bottom, then it's going to move 60 pixels upwards from the bottom edge. For 35
it to move outside of the slider, 36
then we have to go negative values. Actually it works more like this. 37
It calculates distance between bottom of the slider and the bottom of the arrow block. 38
So often we have to compensate for the height of the element. 39
By the way, make sure you type Px next to 60. By default, 40
as you can see, it says percentage. 41
So the field is set to percentage value. 42
And if you just type 60, it will think you mean 60%. 43
Now let's apply the same class to the second arrow, so we don't have to do all these changes again. 44
Let's move the left arrow towards the left. 45
We can do that by putting some value in the right position. But before we do that, let's give the 46
left arrow a combo class. 47
Otherwise the changes will be applied to both of them. 48
Again, we are putting value in the right, because we are telling it to move away this amount from the 49
right edge. 50
Excellent. 51
Let's check the preview and see how it works. 52
There is just one issue. 53
If you take a closer look at the arrow blocks, you'll see that they are sort of overlapping. 54
The boxes are a little too wide. And in the preview the entire box is clickable. 55
So user is able to interact with the empty space too. A little bit of interaction with empty space is 56
good, so user doesn't have to be so precise at aiming the arrow. But too much, makes it odd. 57
Plus overlapping will cause some issues as these are links. To fix this, 58
we need to change the width of the arrow blocks. In the width, 59
it says it's auto, but that's not really true. 60
There is some default width applied to it, that we're not seeing. 61
Let's give it some size. 62
I think 40 pixels is good. 63
I have styled the right arrow, which has the base class. 64
That way both of the arrows were updated at the same time, because of the linked base class. 65
There's one more thing we can do with arrows. 66
We can hide them on each end. 67
We can do that from the slider settings. 68
This is actually a better user experience, that way user knows which way they can slide. And see when 69
the testimonials have reached the end. 70
Let's check the responsiveness to make sure it all looks great there too. 71
And we have just one last action left. The footer. We'll do that 72
up next. 73
Stick around.