jQuery and AJAX Tutorials 26 | jQuery Slideshow Arrows Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

what's up guys my name is Ilias and
welcome to the 26 to toriel on jQuery
and in this tutorial we are going to
create the same function we created
further for the switch right we'll
create which left so that you can go to
the previous pictures and you know we
already learned a lot about jQuery and
we'll this nice Jaipur portfolio and I'm
sure you already are able to create more
interesting things using your knowledge
right now so but now let's just go ahead
and do the same feature for the left
click function and I won't copy the code
I will just write it again so we create
a variable called proof a lie a previous
list item and set it equal to the
current Ally dot prayer and what that
profess is the same as the dot next but
just get the previous element in the
list and then we can define the brief
source as well and set it equal to
prayer list item dot children and grab
the image element out of it and get
access to its source attribute where the
path to the image is stored and then we
select the main picture the main image
and set it source attribute to this
previous source which we just fetch it
right now yep so and then don't forget
to reset the current current list item
to the previous item so now it's it's
done and now you can scroll from the
right to the left right like so but
there is a problem and if we reach the
end of the list so this is the last
picture and we we click right
there's nothing happens and when we
click left nothing happens as well so
everything gets messed up when we get to
the edge of the list and now we will
will fix this bug and there is a nice
working around I just figured out so
every time we set up this next Li thing
we will check if the if the next or if
the current element is the last one and
if it's the last one we will instead of
selecting the next element will select
the first element and it's actually very
easy to understand all right so let's
check if the current Ally is last child
which is just that is so jQuery is
actually a wonderful thing I mean it's
so intuitive so in order to check if
it's the last child you just say the
element that is which is a function and
you just say last child so if it's the
last child we will run this code and if
it's not the last child will run
something else so if it's not the last
child we can grab this line of code and
paste it here so you can access to the
next element and if it is the last child
you can just go ahead and say next Li
should be equal to the to the mmm look
if you are real quick to the portfolio
Li dot first and this should work out
let's just check so I'm clicking the
last image and I want to click to the
right and it did so we just jumped from
the very last picture to the first one
and if we continue clicking next we will
go all the pictures all the pictures in
a circle so now we did it and well of
course it's very easy to do the same
functionality for the left click so we
can actually copy this code snippet
and paste it right here and I'll just
get this line of code which gets to the
previous element and I replace it like
like so and instead of saying next Ally
of course I need the previous list list
item and instead of saying first I can
say last and here instead of saying last
I can just say first and let's just go
ahead and test I put the first image and
I want to go back hold on that and I
want to go back and it goes back so now
we can scroll the images to the right
and to the left is it wonderful and you
know it's only well it's not that many
lines of code in jQuery because you have
all this cool selectors and you can ask
if the element is first child or
astronaut first child just using this is
function so this is something really
cool we learn with these two tutorials
and I hope you guys had fun and I'll see
you guys in the next tutorial where
where we are going to learn lots of cool
stuff so thanks for watching and I'll
see you guys in the 27s tutorial