HTML and CSS Project Tutorial: Pure CSS Image Slider

hey i'm hunter from skillthrive and in this video i'll be creating this image slider with only html and css i'll be using copin to write the code and most of the default settings should be fine however i do have a css reset enabled which will reset all the default css for browsers that way we can ensure that we're all starting from the same point no matter which browser we're using now let's go ahead and start on the html first i'll create a section tag and give it a class of container inside this tag we'll create a container with a class of slider wrapper which will hold all the images and navigation for the slider next create a container with a class of slider this container will hold all the images so between the container will add the images notice that each image has an id that follows a pattern of slide 1 slide 2 and slide 3. this is important in order to get the navigation to work because it will be using anchor links i won't cover how anchor links work in detail in this video so check out the link provided in the description to learn more the source attribute for each image is the link of the image file which are coming from unsplash.com a free stock photography website also make sure you include an all attribute for each image tag that explains the image in detail this is important for making your html accessible to users that require a screen reader for web browsing outside the closing tag of the slider but still inside the slider wrapper add one more container with a class of slider nav inside this container create an anchor tag for each image setting the href to the id of each image tag from the previous step now that the html is complete you can open the css panel to start styling the slider the first css style will target the container class and will add some padding around the slider if you want to learn more about how spacing works on the web including padding margins and borders be sure to watch the video at the end of this one the next styles will target the slider wrapper class first set the position to relative which is important later in the video when we use absolute positioning on the navigation next set a max width to 48 rim which will force the slider to take up that much space if available and dynamically resize for smaller screens last set the margin to have a top and bottom value of 0 and a left and right value to auto by setting the left and right value to auto the container will center itself on the page horizontally right now it's a bit hard to see the container we've created so let's inspect the preview and select the container with this slider wrapper class now you can see what we've created a little better if you enjoyed the tutorial thus far be sure to give it a like to help others find it also consider subscribing and clicking the bell icon to be the first to know when i release new videos like this one now let's style the slider class first we want to use flexbox so we need to set the display to flex we also want the image to be a 16 by 9 aspect ratio so let's set the aspect ratio property to 16 by 9. in order to hide the images that are overflowing outside the container set the overflow x property to auto by default the images that overflow will have a scroll bar that allows a user to view the rest of the images by scrolling to the left or right we can change the behavior of the scroll bar in order to get the effect we want with the image slider by setting the scroll snap type property to x mandatory the x value tells css to snap along the x-axis and the mandatory value is a strictness value that forces the behavior to always snap to the next snap position which creates the slider effect we want however this snap effect won't be visible until we add the scroll snap align value later in the video to continue the slider effect we want let's also add the scroll behavior to smooth which creates a smooth animation when a user clicks on one of the navigation links the next css property will add a shadow to the slider the first value is the x offset the second is the y offset the third the blur the fourth the spread and the fifth the color for the color value we're using hsla which sets the hue saturation lightness and alpha or opacity value in this case we're setting the color to appear black with a 25 opacity last set the border radius to 0.5 rim to round the edges of the slider now we need to style the image tags inside the slider class the parent element or the container with the slider class is using flexbox so we can set the flex property on the image tags to tell each image how it should behave in flexbox the flex property is a shorthand property for setting flex grow flex shrink and flex basis by setting flex grow to 1 every image will set to an equal size inside the container by setting flex strength to zero every image will retain the width it needs and not wrap its content and by setting flex bases to one hundred percent every image will have an initial size of one hundred percent meaning it will take up the entire parent container to complete the slider snap effect set the scroll snap align property to start now the image will snap or stop at the start of the image element in the parent container to fix the distorted images set the object fit property to cover which will make the image fill the height and width of its parent container while maintaining the original aspect ratio of the image keep in mind that this will typically lead to some of the image being cropped out the next item we need to style is a slider knife container this container uses flexbox so set the display property to flex we'll give each sibling inside the nav one rim of spacing between one another by setting the column gap to one rim earlier in the video we set the slider wrapper to have a position of relative this is important now because we'll use absolute positioning to set the position of the nav and by setting the position to relative to the slider wrapper this nav now has an idea of what it needs to actually be relative to now move the nav 1.25 rim from the bottom by setting the bottom property to center the nav first set the left property to 50 percent then set the transform property to translate x negative 50 percent which will move the navigation to the left by half of its width which will automatically center it last set the z index to one to ensure the nav sits on top of the slider right now you can't see anything we style because we have yet to style the navigation buttons however if you inspect the element and select the slider nav container you can see it positioned in the center horizontally and 1.25 rim from the bottom of the slider wrapper now it's time to style the navigation buttons first set the width and height to 0.5 rem next set the border radius to 50 to make the buttons a circle make the buttons white by setting the background color to the following hex code drop the opacity of the buttons to 75 so a little of the image comes through last set the transition property to target the opacity property setting the animation timing function to ease and setting the animation to 250 milliseconds this transition property will play an important part in the next style because we will change the opacity when a user hovers over the button without this property the button would instantly change the opacity but now it will have a smooth animation effect that will look a lot better with that said let's write the styles for the hover selector for the anchor tags and set it to increase opacity to 100 percent now when a user hovers over a button the opacity will have a smooth transition from 75 percent to 100 percent check out this video to learn more about how spacing works on the web and hit that like button and consider subscribing if you found this video helpful again i'm hunter from skillthrive and i'll see you in the next one

Channel: Skillthrive

Views: 276,871

Keywords: image slider, css image slider, pure css image slider, html css slider, html image slider, responsive image slider, pure css slider, html css beginner, html css, html css project, html css tutorial

Id: McPdzhLRzCg

Length: 7min 41sec (461 seconds)

Published: Wed Jul 20 2022