Creating a Image Carousel with HTML, CSS, and Javascript
What you'll learn
- How positioning works in CSS
- DOM Manipulation
- How to use an index to keep track of what to show
Prerequisites
- Basic HTML, CSS, and Javascript
React verison coming soon!
The Code
* If the component preview isn't loading, try refreshing the page.
* You can adjust the size of the code preview and code by draging the sides!
Explanation
HTML
- Let's get started! We will create some containers, one container to hold all of our slides and three containers for each slide. Within each slide container, we will have the slide number, the image, and some caption text.
- At the bottom of our 'slideshow-cont' we will add two link tags to represent our arrows(using HTML symbol entities) and another container to hold three dots to represent which slide we are on as well.
CSS
- As usual, let's reset our global padding, margin, and set our border-sizing to border-box. With our overall container, we will set its position to relative so we can position things within the container. Let's set a max-width of 600px to keep everything a good size
- Our slide container will have a display of none(you can add this at the end), and a position of relative as well. Our .slide number will have a position of absolute and be positoned in the top left. We will add a nice background color with some padding to make it readbale no matter the image color. We will do the same thing for our caption text, but we will position it in the bottom left instead.
- On to our arrows, we will style both to be in the middle using a combination of top: 50% and the transform property(this is a common pattern to center something vertically. Add some styling to make it look better. Then, individually, position them to their corresponding left and right sides
- Finally. lets center our dot-container with the rest of our content. We can create each dot by setting and an equal height and width of 12px, then giving a border radius of 50%. We will also create an active class which will be placed on the active dot for the corresponding slide.
Javascript
- Let's dive into some new JS concepts! We start by creating a variable slideIndex, initialized at 1, to track the current slide. We call our main function, showSlides, with slideIndex as the argument to display the first slide.
- Next, we have changeSlide, a function that takes n (either 1 or -1) to move between slides. This function adjusts slideIndex by adding or subtracting n, and it will be attached to our arrow buttons as an onClick function in the HTML. The left arrow passes -1, and the right passes 1.
- The currentSlide function sets slideIndex to a specific slide number (1, 2, or 3), allowing us to use it with the navigation dots. These dots will trigger this function via onClick, updating the slideIndex
- Now, our main function, showSlides. We first select all slides and dots and store them in their respective variables. We handle out-of-bounds indices by checking if slideIndex is greater than the number of slides, resetting it to 1, or if slideIndex is less than 1, setting it to the last slide.
- We hide all slides and remove the active class from each dot. Finally, we display the correct slide using slideIndex and mark the corresponding dot as active. Since arrays are zero-based, we subtract 1 from slideIndex to show the correct slide.
