How To Create An Animated Image Carousel With CSS/JavaScript

we're going to be creating this modern css carousel and also ensuring it's 100 accessible which is easier than you'd think [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you and in this video we're going to be covering the css carousel that you see on the side of your screen super beautiful looking and actually surprisingly easy to get started we want to create an index.html page and inside of here we're just going to create a simple style sheet so we're going to have a link to a style sheet called styles.css which we can just create right here super straightforward then in our html let's just write out all of our html to start with because it's pretty straightforward first i want to create a section and in this section in order to make sure that we have accessibility i want to add an area label and this is just a label for screen readers and we're going to call this newest photos you can imagine this is like a photo gallery and this carousel is showing like the most recent photos so just give it an appropriate label then inside of here we're going to have an unordered list and this unordered list is going to be for all of our different images so we render that out and then inside of here we want to have all of our different list items which are going to be our individual items so li dot slide so this is going to be for an individual slide and inside of here we're going to have our image which is going to have a source tag so we're just going to say image our source here is going to be coming straight from unsplash so i'm just going to copy this url you can use whatever image you want this is just coming straight from unsplash which is a great image repository and we want to give this an alt tag make sure that this is appropriate to the image in our case we're just going to call it nature image number one because it doesn't really matter too much for this example just make sure it's useful for whatever your image is then i'm going to just copy this down a couple times so we have three separate images i'm going to make sure i update these image urls to be the image url that's coming straight from unsplash so we can have three different images make sure it's image two and image three just like that so now if we save and open this up with live server we essentially have three different images showing up as you can see image one image two and image three super ugly but we have our images now the next thing i want to do is i want to create a div this is going to have a class here of caro cell and this div right here is just going to wrap everything that is our carousel just so we can easily style our carousel and select everything inside of javascript so now we have our carousel and what i want to do inside here is add two different buttons and they're going to have a class of carousel button and it's going to have a class of either previous or next so in this case this is our previous button and this right here is going to be our next button and now to make the arrows that you see right here we're actually using something called an html entity if you just go to a site like toptil.com you can find these html arrows you can scroll through there's tons of options but we're going to be using this left arrow and this right arrow so just copy this html code paste in the left arrow here copy the right arrow and we're going to paste it in over here and now if i come over here you can see that we have that left and that right arrow showing up a little hard to see but as i zoom in you can see the left and the right arrow just like that that right there covers most of the html that we're going to be doing so the next thing i want to work on is our styles and the first thing i like to do in every single style sheet is make sure i take my before and my after element here and i just want to make sure that i set my box sizing to border box and make sizing things so much easier and i also always like to set my margin on my body to zero that's just going to push everything up to the edge of the pages make sure i spell margin correctly there we go as you can see that just got rid of the margin now we can start styling that carousel with the carousel what i want to do is i want to take our width i want to make that 100 view width so it's going to be a full width and a full height so we'll say height is 100 vh as well and we're going to say the position for this is going to be relative and that's just because we're going to position absolute our buttons inside of it so now that hasn't really changed anything at all but that's okay once you start messing with our slides though it's going to be really easy to see that things are working so if we take our slide and what we want to do is we want to position this absolutely so position absolute i want to set the inset to zero that's just going to make the top left right and bottom of our image zero so as you can see our image is now taking up a lot of the screen right here and they're all absolutely positioned in the top left corner i want to set the opacity to zero which may sound interesting but that's because i also am going to have a slide which is going to be our active slide and i want to set the opacity on this to one so our active slide which we can just make our first slide data active is going to show up while all other slides will not now also inside of our slide i want to make sure that the image portion of it is going to fill the full screen so we can say slide image i can set this to a display of block so i can resize it i can change the width to 100 the height to 100 and the object fit to cover that's just going to make it so that the image is going to fill the entire screen and it's going to make sure the aspect ratio is maintained that's what this object fit cover does if i remove that you can see it's all squashed and stuff when i put the object fit cover you can now see its aspect ratio is maintained and i can even change the object position to center so it always focuses on the center of the image now the next thing we can work on is styling out those carousel buttons so let's just take carousel button here i want to obviously position these absolutely i want to remove the background so we'll say background none order is going to be none i want the font size to be large so we'll say 4 rem if we save you can see that so far that doesn't actually do much they aren't actually showing up where we want them to so the thing i need to do is be able to position them in the right place so we'll say top 50 that's going to push them down on the top of the screen but you'll notice we can't see them yet so what we need to do is we need to set the z index on these to something like two just so they show up over the top of our images and also to make sure it's perfectly centered we want to take our transform and we want to translate in the y direction negative 50 percent and that's just going to push them back up just a little bit to be exactly dead center now you will notice we have this weird scroll bar going on with some spacing at the top that's because by default ul's have padding and margin on them that we need to get rid of what i want to do is i want to take our carousel whoops caro so i want to select the ul inside of it and i just want to take my margin set it to zero padding set it to zero and i want to take my list style and i want to set this to none and now if we say that you can see that gets rid of the scroll bars and the padding and the margin which is great now back onto the buttons i want to change the color here so we'll say color is rgba i want this to be essentially a mostly white color but i want it to also be partially transparent so that way it kind of shines through some of the color of the image itself and doesn't cover up too much of the image also i want to change my cursor to pointer so i know i can click on them and i want to set the border radius here equal to 0.25 rem and i also want to set some padding which is going to be equal here to 0 and 0.5 rem and you may think that's an interesting thing to do because right now we have no background so we're going to add in a background by saying background color and we want that to be rgba 0 0 0 and 0.1 so it's going to be a very very dark background color that's mostly transparent now if i just make sure i add this last comma in there you can see we now have that background color showing up and that looks really good so far now the next thing i want to do is i want to take my carousel button and i want to do some hover states and i want to do some focus saves so we can do carousel button focus here and this is just going to help with accessibility so i want to change our color to full on white so now when i hover you can see it changes to a completely white color and i want to make our background color just a little bit darker so we'll use for example 0.2 here instead of 0.1 so now you can see the background gets darker and the actual icon gets darker when i hover over top of it and that works for focus and for hover now also i want to change my focus date specifically only because you'll notice when i tab onto this i kind of get this weird ugly looking border that's something called an outline i want to make it look a little better by just doing one pixel solid black so now when i tab onto that you can see it just gives it a black outline which in my opinion looks a little bit cleaner and this actually helps people that don't really have access to a mouse but use tab to move around they can tab around and they can actually see what's going on on the page now the final thing i want to do is i just want to position these buttons in the right space so i want to get my previous button and i want to make sure this one has a left of one rem and i'm going to copy this and i want to make sure for our next one it's going to show up on the right side so we're going to set the right to one rem and now you can see that our left button on the left and our right button is on the right so now we can actually work on the javascript for making the carousel work so let's create a script.js and we want to make sure here we're going to reference that script at the top of our page so we'll say script dot js and make sure we defer it so it loads after our html and then inside of here we just want to get all of our buttons which is just document dot query selector and we want to get them equal to a data carousel button and the reason i'm using a data attribute here instead of a class is because it makes working with javascript so much easier because you don't have to worry about overlap between your classes and your javascript so on our buttons let's just add that data attribute in so we can select that in our javascript and then what i want to do is i want to say buttons.for each i want to loop through each one of the buttons and for each one of the buttons i just want to add an event listener so we can say add event listener and make sure this up here is a query selector all there we go so we're going to add an event listener this is going to be a click event listener whenever we click on this button all i want to do is essentially just swap to the next image so in order to determine if we're going to go to the next image of the previous image inside of our html where we have our data carousel for buttons we can actually set a value for these so this is going to be previous and this right here is going to be next so then what i can do inside of my script is i can just say offset is going to be equal to button.dataset.carouselbutton make sure this is dataset.carocell button this is going to access the property that we set in our html here which is the previous or next and then what we can do is we just say hey if that is equal to next then we want to return the value one otherwise return the value negative one so we're either going to go to the next image or the previous image depending on this text here then i can get all of my slides so from my button i want to get the closest parent element that is a carousel so we can say data carousel and in our html we're going to add that in so on our carousel we'll say data caro cell just like that so what we're doing is going from our button to this carousel and then from the carousel i want to select this slide container so here we can just say data slides and then from here i can do a simple query selector to get the data slides so we'll say data slides and there we go so i've gone from my button to the slides for that particular carousel and by doing it this way it's going to make sure that no matter how many carousels we have on our page all of them are going to work as we expect so now i can get the active slide so i can say const active slide is equal to my slides i just want to get this slide here that has that data active attribute on it which we already have on our very first slide as you can see right here now this is just going to get our active slide and then i want to get the new index the new index is super straightforward first we need to convert our slides to an array the children of them so we're going to say dot dot slides dot children this will convert to an array make sure i spell children correctly then what i want to do is i want to get the index of my active slide in that array and i just want to add in that offset which is either going to be negative 1 so it'll subtract 1 or positive 1 so it'll add 1. then since this is going to loop so once we get to our last image we want to loop back to the beginning and if we go from our beginning image backwards we want to go to our last image we're going to have a few ifs our new index here is less than zero so if we're going backwards past our first image well i just want to go to our last image so we'll say new index is equal to our dot children dot length minus one this is going to be the index of our very last element and now here if our new index is greater than or equal to our length of our slide so dot children dot length this means that we've passed the very last slide so i want to just loop back over to start at the very first slide and this just makes sure it's going to be a continuous loop of images then what we can do is we can say slides.children we want to get the one at the new index and we can set the data set dot active equal to true then we can use this delete keyword here to delete the active data set from our current active slide so all this code does is add the data set active class or attribute to our currently new active slide and this removes it from the active slide that was active before so now when we click next you can see it's swapping to the next image and it's just going all the way around in a loop no matter which direction we go but right now we don't have a fancy animation as you can see on this one we click next we have this nice fade animation over here it's a very jarring animation so in order to fix this we can use some simple css if we scroll all the way up here to where we have our slides you can see that we have our slide with an opacity of zero and our slide that's active has an opacity of 1. so we can do a really simple trick where we just do a transition this transition is going to be 200 milliseconds on the opacity property and it's going to be an ease in out now if i say that you can see we have this fade in and out animation but you'll notice that it's fading to white and then fading to the image and that's because both images are fading in and out at the exact same time instead of what i want to happen is i want to have our new image fade in over top of the old image and then the old image is going to disappear in order to do that we're going to set a transition delay to 200 milliseconds so our actual transition takes 200 milliseconds but we have a transition delay of 200 milliseconds which means that the animation is not going to start until the transition is complete and that's because on our active slide we're going to change our transition delay here to zero so the active slide does not have any delay it's going to start its fade in animation immediately while the inactive slide that's disappearing has a 200 millisecond delay so it's going to wait until the new slide is done animating in and then it will disappear and just to make sure our slide shows up above all the other slides we're going to set the z index to 1 so our active slide always shows up on top so now when i click next you're going to notice the new slide animates all the way inward before the other one disappears again we can try that again but you'll see it's actually not quite working it's going to white still and that's because for transition delay you need to make sure you set it to 0 milliseconds and now that's actually going to fix and you can see our images are perfectly animating over top before the other one disappears and that's all it takes to create this image carousel if you're confused by some of the fancy css selectors we used i highly recommend checking out my full css selector cheat sheet linked below it's completely free and covers every css selector you're ever going to encounter in your css career with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 37,199

Keywords: webdevsimplified, css carousel, image carousel, js carousel, js image carousel, javascript image carousel, javascript carousel, css image carousel

Id: 9HcxHDS2w1s

Length: 14min 10sec (850 seconds)

Published: Sat Nov 27 2021