Build a JavaScript IMAGE SLIDER in 15 minutes! 🖼️

hey what's going on everybody so in today's video I'm going to show you how we can create an image slider program using JavaScript you will need some images to work with I would recommend finding three or more somewhat related images to whatever you would like to create an image slider for once you find your images put them within your website folder and we are ready to begin okay let's do this thing everybody so we will create a development to contain everything this development will have a class of slider within this development we will create another div element this development will have a class of slides to contain our images within this inner div element we will create three image elements the first image will have a class of slide with this image element I will set the source attribute to be a relative or absolute file path let's begin with image one whatever you currently have I'll copy the name of this image including the extension so my my image has a name of image 1.jpg and for some reason if this image can't display I'll add some alternative text with the alt attribute let's say image number one and there is my image I will copy this image element paste it twice or once for every image that you have then I have image two and image three let me change those we have image 2 and image three so you should have three or more images depending on what pictures you're using and how many then we're going to add some Arrow buttons for the time being that will be down at the bottom so we will create a button element now you could use a left angle bracket let me zoom in but I think there's a better option there's a Unicode character for a left pointing angle bracket which looks like this we will use the Unicode character of Ampersand # 1 094 I think that looks better but you do you all right then let's create a right angle bracket with another button the number is one95 so that will create a button with an arrow that points to the right for the previous button the left one I will assign a class of prev meaning previous and the next button will have a class of next when we click on these buttons we'll call A JavaScript function we need to set the onclick vent Handler equal to a JavaScript function for the previous button we'll call a function of prev slide meaning previous and for the next button we will call a function of next slide to go to the next slide okay and that is all the HTML that we need for now let's go to our CSS stylesheet we will select our class of slider that contains everything class slider we're going to use relative positioning these elements will move relative to their normal position using relative so we have position relative I will set a width of 100% as well as margin Auto to Center everything horizontally now just in case if our images are really big I will set the Overflow property to be hidden so take our class of slider select all the images with these images I will set their width to be 100% and for now I will set the display property to be none we don't want to display all the images right away so they should disappear let's add a little bit of functionality before continuing let's go to our Javascript file I'm going to create a node list of all the images within our class of slides so I will create a constant of slides which will will be a node list equals document. query selector all we will select all elements within the class of slides that are images image elements we will also declare an index of the current slide let slide index so this will be zero initially to start at the first slide we'll be using the set interval function set interval will return an ID that we can work with so we will declare a variable to hold to that let interval ID for now I'll set it to be null meaning no value okay let's declare our functions we will have a function to initialize our slider this will populate our web browser with the first image when we call this function then we need a function for show Slide there will be one parameter an index an index of the next slide we would like to go to a function for the previous slide prev slide and a function for next slide function next slide within our function of initialized slider we will take our node list of slides at index of our current slide index which will be zero initially I will access the class list and add a class of display slide which we still need to work with and then we will call this function right away okay we need to build this class still display slide we will select all image elements that have a class within their class list of display slide if an image has this class we will set their display property to display as a block we should get our first image if you would like although it's not necessary we could display this image after all of the Dom content loads by using an event listener here's how if you would prefer to wait for all the Dom content to load we can take our document add an event listener we will wait for the event of Dom content loaded once all of the Dom content loads pass in a call back to initialize slider so this would work too and I would say it's the preferred way rather than just calling this function initially wait for all the Dom content to load then display our first image by calling this function within the initialized slider function we will use the set interval function we will call the next slide function after a given amount of seconds let's say after 5 seconds I would like to go to the next slide and display the next image whatever is next within our node list in order for us to work with this interval this function is going to return an interval ID so we can clear it later if we need to we will take our interval ID set it equal to the set interval function so I'm going to console.log my interval ID just to see what it is so let's save and run everything go to console so this interval has an ID of one if I need to clear this set interval function I can access it by its ID which is currently one and we can get rid of this line to avoid displaying an image if we don't have one we can wrap these two lines of code within an if statement we will check if our node list of slides its length property is greater than zero if we do have slides then display it and use the set interval function if there's no slides no images then don't do this okay then we're going to go to the next slide function we're going to increment slide index by one slide index Plus+ and then we will call the show slide function pass in our slide index after incrementing it and that is all we need for next slide then we have the show slide function with in our show slide function we will access our node list of slides use the for each method to iterate through all of them I would like to take each slide Arrow do this take each slide access its class list then remove a class from the class list we will remove the class of display slide if it's time to move to the next slide we don't want to display the current slide anymore we'll remove display slide so that it's no longer displaying as a block remove these properties then outside of the for each method we will add display slide to the next slide then we will take our slides at index of slide index access the class list of the next slide then we will add a new class add the class of display slide so that it displays as a block and let's see if this works after 5 Seconds we should move to the next slide and that does in fact work let's wait again for the next slide and that has worked too we need to reset our slide index because right now we're going out of bounds we only have three slides in this example within our show slide function We'll add an if statement and an an lse if statement if we reach the end of our slides we need to reset the slide index and set it back to be zero if our index that's passed in is greater than or equal to our node list of slides length property if we reach the end we need to take our slide index and reset it to be zero now if we go backwards with the previous button if our index is less than zero we will take the slide index set it equal to our slides length property minus one to set it to the end if we're on the first slide and we hit the previous button that will bring us to the last slide these images should Loop let's see if that does work so we're on our green car and we should go to our blue car car next and that does work our initialized slider function is done if we click on the next button we should be able to go to the next slide right away now we have to work on the previous button and add some functionality to that within the previous slide function we will take our slide index and decrement it with minus minus then call the show slide function pass in the current index now we should be able to move forward and back now if we hit the previous button because we want to look at an image the timer is still going we'll still go to the next slide if we would like to take some time to admire one of these images we can clear the set interval function by using its interval ID so if somebody were to hit the previous button let's clear the timer we will use the clear interval function we will pass in that interval ID our set interval function is still going to move the slides forward but if I were to hit the previous button that interval is going to stop we are done with all of our JavaScript functionality we're going to apply some CSS styling to the buttons and even add a transition animation to the next image we will style our buttons next within our class of slider select all buttons I will set the position property to be absolute positions an element relative to its parent meaning the slider element with absolute positioning I will set the top property to be 50% these buttons will then be positioned on the Y AIS at 50% meaning the middle then I will use the transform property I will translate them on the Y AIS by minus 50% Translate Y is a function we're moving these buttons up by 50% of the element's height that will put this button right in the middle take 50% of the height of the button Move It Up by that amount I'll increase the font size font size 25 pixels or better yet let's do like 2 RM okay now for the background color I'll set it to be black but I'm going to lower the alpha on it so it's transparent I'll set the alpha to be 50% and for the font color color I'll set that to be white okay you can see our two buttons are overlapping currently I'm going to remove the border around the buttons border none and change our cursor to be a pointer if we hover over one of the buttons so these buttons each have a class previous and next let's select the previous class CL I will set the left property to be zero to left align it and with the next class that's the next button I will set the right property to be zero to align it to the right I'm also going to add a little bit of padding too around the buttons let's add some padding here padding 10 pixels by 15 pixels that looks pretty good we going to add an animation at Key frames we need an animation name we will name this animation fade for a fade effect from this property of opacity I can't spell today 0.5 meaning 50% to this property opacity one for 100% when a new image is displayed the opacity is going to be 50% % so it's transparent then after the animation is complete set it to be one for 100% now we just have to utilize this animation of fade all images that have the display slide class we will set their animation name when that image is displayed to be fade how long do we want this animation to take we will set the animation duration to be about 1.5 seconds okay let's see if this works we should get a fade animation when each new slide appears we can move forward and we can move back all right everybody so that is an image slider that you can create using JavaScript HTML and CSS

Channel: Bro Code

Views: 11,583

Keywords: javascript, javascript tutorial, javascript full course, javascript course, course, full course, web development, web developer, software engineer, software engineering, coding tutorial, learn to code, tutorial, html, css, project, program, image slider

Id: 749ta0nvj8s

Length: 15min 49sec (949 seconds)

Published: Tue Dec 26 2023