Ever noticed those slideshows on a webpage that scroll over a set of photos or icons? A slide element is an animated HTML component that displays a set of things (photos, icons, anything) and scrolls through that content in a fixed place on the page. Sometimes there are buttons underneath that let you know how many options are in the set and may allow you to jump to a specific entry or preview what's coming up.
In a quick search, I found 2 very different examples of slide animation in the first 3 websites I checked.
The LA State Parks website has photos that slide on a timer and can be previewed using the button at the bottom. Chase's homepage has five icons displayed at a time and more that can be shuffled through using the arrows left and right or the buttons at the bottom.
Our slide element will be composed of 7 photos of bears. To get started, we'll set up an HTML page with the images in a container div.
I've sized each image to 500x300px and set them side-by-side without any spacing by using float: 'left'. The parent element is invisible and the size of all 7 images together, 3500px.
At this point, we have 7 images, rendered next to each other from left to right, running off the page.
The next step to building our sliding animation is to create a second container around the existing one and set it's size to that of just one picture, and give it an overflow property 'hidden'.
The overflow: 'hidden' property will ensure that only one picture shows at a time. Now only the first picture is visible.
Next, we'll add the buttons at the bottom by creating a list of item links with a custom data attribute, data-pos, for position. Assign it the following positions. Can you guess why we've chosen those positions?
Style the list so the bullets display horizontally beneath the picture to resembles buttons. Add hover and select properties that change the bullets' color when you interact.
This is looking very close to our final product. All that remains is the animation. To move forward from here we’ll need Javascript. We need to display another image from our strip of pictures, we’re going to query the DOM and set up event listeners in the script tag.
Then we’ll give our first image the class ‘active’ and create a function that changes which image has the active class label.
The last piece of JS: add a function that changes the displayed image and highlights its corresponding button. That custom attribute, data-pos, will come in handy to change the slider position.
Finally we’ll make the changes scroll rather than cut from image to image by adding a transition tag to the CSS of the inner container.
Now we've got a scrolling slideshow animation!
*UPDATE
Some of you call this type of element a "carousel." So the theme could have been.. bearousel?
You're welcome.
Top comments (0)