Creating An Image Slider Using Only HTML and CSS



Sliders. There are many different meanings to the word but the sliders I'm discussing here today are the sliders that help make a website responsive. I made post on css a while back and you'll know you probably remember me saying that it designs text. 

However, that's not all what we can do with css; we can also change the way images interact with each other using transitions. Picture sliders help us convey meaning in whatever is being said and can help us better understand the goal or vision of a website. 

Research from Blue Corona shows that "38 percent of visitors will stop engaging with a website if the content or layout is unattractive". That's a lot of potential consumers or viewers fleeing without having a look around!

However, this shouldn't be much of a problem as it can be corrected by a few strategies that I'll be posting later on. So to begin, the program I'm going to be using is Brackets and right now we want to create a new html and css file.

Linking Stylesheets and Adding Pictures


Before I start, one thing I may have not mentioned is that you must connect or link your html code to your css code. To do this, on the fifth code line, I created a link tag. Link tags allow us to link stylesheets to the html file.

In this line, "rel" refers to the relationship between the linked document and the current html document, "href" stands for hyperlink reference or source of the linked document and "type" is a way of adding support for other browsers by letting them know that this linked document is a stylesheet.

Now, if you remember the layout of html we will begin by creating a div tag enclosed inside of the body tag of our html document. It needs an identifier, so I named this with a class called "image-slider" just for reference. Html has a special built in way of adding images and we can do this by using the img tag; the short name for image. 

You can think of an img tag as a way of storing specifics about an image, such as captions, identifiers, height, and width. Next, in order for our picture to appear, we have to create a reference or pathway for the computer to find the image and this is known as the src (source). 

Every picture has a source and typically it's the link or web address in search bar at the top where you clicked to find the picture. Another thing we can add to the image tag is a property called alt, which stands for alternative text and with this we'll be able add a caption to the image.



In order to add elements to an image they must be enclosed with quotation marks. With classes of html, you can access any class in css using .dot operator. In the css stylesheet, I specified all of the properties I needed for this to work. 

By glance, you may recognize what some of these properties mean and that’s good! For now, I want to just want to explain what animations do and then we’ll go over the rest. Simply put, animations help our images move and by assigning a value we can determine how and when a picture should move.

Keyframes and Animations


CSS has a special way for going about how to insert animations for an image and this is known as keyframes. Keyframes allow us to attach animations to our html elements, similar to the way you can add transitions to a slide in Microsoft PowerPoint. You can control when you want your animation to occur by using the "%" measurement. 

And of course, you can do the same thing with other images to create sequence of pictures moving at the same speed! Going back to the image slider class that we made, you can insert special animation properties to the class such as animation-duration, animation-name, animation-delay, animation-direction, etc. 

For each picture, we created a new name for the animation of each image in the slideshow; hence "slider 1", "slider 2", etc. That's exactly what I did here and you can even create an infinite loop by using the keyword "infinite" for the value. 

To wrap things up, I'll quickly walk you through the rest of the style.css properties. Overflow prevents pictures from overlapping each other and it's also useful for keeping text from running off a page.

The position property determines how we want our picture positioned on a webpage and the value absolute means that our image can be placed anywhere on the page. Additionally, you can control how far left, right, up, and down a picture can be placed on a webpage. 

The float property works similarly, allowing us to move a picture to the farthest left or right possible. Finally, the transform property moved our pictures 600 pixels to the right along the x-axis and then the red moves back to 0; generating an endless sequence.


Thank you for reading.

Powered by Blogger.