jQuery Image Slider Tutorial With Slideshow Functionality

jQuery Image Slider Tutorial With Slideshow Functionality


recently I have got a lot of comments on
how to create the query image slider so in this tutorial I’m going to show you how
to do that and also I will add slideshow functionality to this slider so let’s do
it hey what’s up guys
Senaid here from codingpassiveincome.com the place where I help others to become
a web developer much easier and faster than they will do it on whwy own so if that
is something that interests you consider subscribing so before we even dive into
the code and start writting I want to explain you the basics that you need to
understand for this tutorial so our goal is to create a normal HTML document and
inside the document we will have one block of the code so let’s say like this
and this will be our slider and inside this slider we will just put a lot of
the pictures so let’s say we have this this this really it’s not important how
many of those we have and our goal is that all the images inside this slider
are hidden so for example we will hide all those and only visible picture will
be this one okay and now we will have some buttons here so that the previous
slide show next and when someone press for example next button we are going to
hide this image and we will show this image if he press next again we will hide this
show this and so on and the same thing is with the previous button and the only
difference is if we have a slideshow so we were so impressed that button what
you are going to do we will actually just every second two or whatever
time you won we will just switch the ink so hide show hide show and so on so
pretty much that it’s extremely basic and most tutorials that I have seen really
complicated those things so let me show you how to write a code so now I get my
PHPstorm I have created a new project and inside this project I have new
folder images and I have one index.html file with content tutor see here so
the image they are just file image some random image is nothing special you
can have as many as you want so before I start writing the code for
those of you that are interested download source code for this tutorial
you will find a link in the description below so the first thing is I will just
use the center to Center all elements to the center of the page this is a
depreciated HTML tag so it’s better to use CSS to make it but for the purpose
of this tutorial is not important so I will say div I will add class slider
and inside this div I will just include say like this five images okay five and down below I will just add
three buttons so this one will be previous another one will be next and
this one will be start slideshow so let’s see what we have so as you can see
here there are just five random image and they are three buttons so what I’m
going to do I will just write some CSS okay so first I will set the background
for our body to the black for the slider image I’m going to hide all images so I
will say like this and then inside the slider I will also have one class active
and that one will have display block and let’s say the border will be two
pixels solid white and basically this active class we will just move from one
to another image and where you see position that picture will be visible so
I will say here active so let’s check that okay now of course those buttons
doesn’t work but as you can see we have the class active on this image and it’s
visible so if we move it for example here let’s refresh there is another
image and so on you can destroy yeah yeah so every time
that there is a different image and let’s see for the slider I will say
melting top 10% just to make so yeah so this is looking good
okay so I’ll just do this and now we need to write some jQuery code that
will make a functionality for those buttons so first we need to include it
so I will just go to the code.jQuery.com here you have a list of all the
versions of the jQuery I’m going to use the latest one at the moment
and I will just copy this and paste it just before closing body tag like this
and now I will just write our script here text/javascript and that’s it so
here I’m going to have two functions so first function will be trained slide
which will be functionality for the previous and the next button and let’s
say the parameter that will receive will be direction and I’m going to have
another function it will be slide show and let’s say the parameter will be
called so that we know which button is pressed so that we can manipulate this
value so we can say start or stop or something okay so let’s say first are
going to make next button so here I will say on click change slide and here
direction will be next so that means that inside this function we need to
check for direction so if the irks me for max load
Isaac to this part of the corn otherwise we’ll execute this part of the code now
we need to get the position of the active image that is show so we will do
it by define new variable let’s say current image or img.active
okay and now the next image we will find from the current image dot next and this
is a method from the jQuery that enables us to find a next element so inside here
if (direction=next) we’ll check if we have next image is so if next image.length we will just move this active class to this next image so that will
say just next image.add class active and we need to remove this class from
the current image so does the here current image.remove class act so
let’s try fresh next and the problem here is we are we don’t have any more
image so there it isn’t next and for that reason I am taking here so if there
isn’t next we will say else and they will position ourselves to the slider
image dot first which means go to the Slyder fine
image select first image which is this one and then just add class to that
first image why this and let’s make a test next and now as you can see it is
always working so if we go to the inspect element to see what is happening
now we can see that active class is just going from one image to another okay
very soon and the same functionality we are going to make for this previous
button so we can just duplicate this we’ll call method trap and here we’ll
say previous image and down below I will copy this paste now we will just
change this image to the previous image and here we will say go to the last image
so then we going backwards where we start on the first image and there isn’t
any less image that we will go again to the biggest image so let’s test so now
previous field doesn’t work let’s see what is the problem not taking the console.log let’s see so
the problem is that we didn’t define unclick method for this button so let’s
try now and yes now it’s worth it okay so if we check with the previous you are
going backwards and the legs are going forward so it is pretty simple so now in order to make a slide show all
we need to do is just to call this function change slide every second or
two so we can say here var interval so we are defining you were able so that we
later can disable it and you will say he set interval so this function receive a
function and a time when this function here will be called again so if you set
a thousand it will need every second so say here function and inside this
function I am going to say change slide and let’s say the direction is next and
here for this button will set a quick slideshow and the call is this so let’s
try it hits start slideshow now as you can see every second the image is changing
but we don’t have a way to stop it so first I would have set this to two
seconds so it’s not too fast and here I will define a new variable stop slide
shock pause and here I will see if stop if not
stop slicer then change life else clear interval which means that if we didn’t
start to stop the slideshow we will move to the next slide and if we stopped
then this interval will be cleared and this function here won’t be called every
two seconds okay and now we just need to find a way to manipulate with this so we
can simply check for this value so if this is start it means that you start
slideshow so this top slideshow will be false and if it stop the stop slideshow
will be set to the true so let’s see var status=caller.attribute
value and we can see if status that index of start
bigger than minus one so it means if there is word start inside this value it
means that our stop slideshow will be false and also we are going to change
the value of this call so say stop slide show and the same principle is for this
so say true and he we will say start so let’s make a test now if we hit start
slideshow as you can see now the world has changed at the stop slideshow and
every two seconds there is a new image and now if we stop it stopped and also
the board is back to the start so that is very very simple to do so now the
last thing I’m going to show you is just how to make those buttons a little be nicer
and for that purpose I will use bootstrap CSS so I will just good to get
bootstrap.com and copy this okay and here I will just define class button button
primary copies there and he policy success so
let’s see as you can see now it’s looking really nice okay and of course
it is working and now if we press this is will work but as you can see there is
always green color so it will be nice to change this color so that is very simple
so I will go here and see color dot add class be in danger not to remote class
begin success and the same thing here so we’ll remove danger set success okay
refresh after press Start you can see that this is changed and if we click again it
is changing so guys pretty much that’s it now you have nice looking but very
simple jquery image slider if you like this video please like it and share it
to your friends and also if there is any question or there’s anything that you
don’t understand please let me know in the comments below take care

Danny Hutson

18 thoughts on “jQuery Image Slider Tutorial With Slideshow Functionality

  1. Good evening, I wanted to ask you if you can make a video, which deals on creating a pdf file with the extracted data in a database. Using PHP, Javascript, AJAX and MySQL.

    thank you in advance

  2. your vedio is very great sir. thank you for making tutorials .
    can you make a vedio to animation on scrolling using animation.css and jquery.

  3. Dear Sir,
    image slider is working fine on pc site but slider not showing on mobile.
    plz share code to add so that slider should show on mobile.
    plz guide me.
    Thanx Sir.

  4. thank for your video many video explain this topic with hard code but you just simple and explainable

  5. yes thank you I've been trying to get this to work for about 2 months,none of the codes work yours does,i was getting very frustrated.God Bless have a vodka on me.

Leave a Reply

Your email address will not be published. Required fields are marked *