Hello and welcome back.
So in the last video, we added this image model.
So when a user clicks on an item in the gallery image component, we display the image model.
We also created these properties.
We are using them in the image model.
Let's go to the image gallery and click.
We also need to set the same properties.
Remember this index right here?
We will need this index to determine the left value.
That is the set right image index and the set left image index.
So inside this click, our course sets right image index.
And now this is going to be whatever the index at the at the time the user clicked or is viewing a particular
image.
Whatever the index is, I want to increment it by one.
So I'll say index plus one.
So if the user is viewing the image at index zero, then if they click on the right icon, then.
Or if they click on it, then it should set the right image to index plus one.
And then they set left image index, which must be the normal index itself.
So this is the first thing that we need to do.
Now let's work on the on click, right?
Function.
So if this is called first sets left.
Who set last night's game left or set it to false.
So if the right is called, we need to set the left to false and then the set right image index.
We need to increment the index by one.
So whatever index and I'm going to use the callback and they'll say index plus one.
And then for the.
Left.
We are going to set the left.
But first, what I want to do is I want to get the last image from this post list.
So I want to get the last image from this post list so that I can use it to do a check.
So I will say post last image equal to posts then in brackets.
Posts dot lengths minus one.
So I will get the last image or whatever is the last item in this post list and then store it in this
variable.
And then the current posts.
I will get the current post because two equals two posts then is going to be right.
Image Index.
So this will get the last post in the post list.
Then this post property will hold the current post and then let me create another function.
Let me do it here because it will just be used to display or set the image URL because I'm going to
be using it inside on click right and click left.
I want to move it to a function.
I'll call this display
image to take in the post and then for this I can let me copy this part here.
Or maybe I don't really need all that.
I'll see post img url and I will do the check here.
So if gif is returned to give otherwise return the image and then I'll call sets image URL and then
passing the image URL.
And now this function I will use it here.
I'll call the function here and then passing the currently selected post.
So this will be used to set the image URL.
So if the user clicks on an image, we are going to set that image and then display it.
And then after that our call sets.
Lift Image index.
This the left image index is going to be whatever the right index is.
That is what I'm going to set as the left image index and then I'll check if posts.
From the post lists.
So I want to get the posts a post from this post list using the right image index.
So if Post's at right image index is equal to last image, that means we have gotten to the end of the
list.
Then I will just call set's last item.
Right.
I'll set it to true.
All right.
Sorry.
Our last, last item.
Set.
Last item.
Right.
I'll set this to.
True.
Yes.
So once we if this condition is true, that means we are viewing the last image inside the posts array.
And then I will set the last item right to true.
And then here, if you check or let me see last item right here.
I'm saying if last item right is true in the image model, if last item right is true sets the pointer
events to known.
That means the icon should not be clickable.
As you can see, it's right here.
So if we get to the last item, then the icon should be the pointer events should be set to none.
This is what we need for the on click right now.
I'll copy this and do the same for the on click left.
For the click left.
This will be sets.
Last item.
Right.
I'll set it to false.
So what it means is once the user is clicking the right icon.
The left icon should be enabled because we have items that we can view if we click the left icon.
The same goes here if the user is clicking the left icon and then going back.
The right icon should be enabled because we have items that we can view.
That's why I'm setting sets.
Last item, right to false.
And then this will be sets left image index our incremented by one.
Okay.
And then also, let me get the first now for this case.
I'll get the first image.
First image or the first item from the post is going to be posts at index zero.
So I want to get the first.
Elements from this post list, and it's going to be at index zero.
And now the current post is going to be left image index minus one.
Okay.
Left image index minus one.
And then I will set the display image and the right.
This would be set right.
Image index.
And I'll pass in the left image index.
Now for the check.
It's going to be.
First check if first image is equal to the posts.
The currently selected posts will do the check.
If that is the case, then I will set the last item left.
True.
It means that we've gotten to the last item on the left.
This is what we want.
Here we handle the right click.
Here will handle the left click on the page.
So let's try this out and see.
Let's see.
Let me reload the page.
Since I have multiple images since where I start with this first.
Right here.
I think this is supposed to be disabled.
Yeah, it's supposed to be disabled.
Let me check.
Right now.
You can see it's disabled here, but by default, it's supposed to be disabled.
We're going to fix that.
But if I start from here, click the first.
If I can go forward right here, you can see
I can go forward.
Now you can see this is disabled.
It means that I'm viewing the last image on the right because, see, I can't click this anymore, but
I can go back right here.
Once I go back, this is now enabled.
I can go forward.
I can go backwards.
The this means that we still have some images that can be viewed.
Yeah, there's some issues here with this, but something we can easily take care of.
So I'll try that again.
And right here and I can go back.
Okay.
So with this now, we should be able to go forward or go backward using the arrows.
The left and the right arrows.