Creating a Carousel with HTML + JavaScript

In this chapter, we'll create a carousel in plain Javascript. This is a basic slider where we've created the Slider containers and slid them with JavaScript, and then you can add any images, text content, or even videos.

Let's get started in creating the basic structure of its HTML.

Step1: Creating the Markup for the Slider

index.html

<!DOCTYPE html>

<html>

<body>

</ul>

</div>

</body>

</html>

Let's add some styles to it to make it move like a carousel.

Step2: Styling the Carousel

You need to add the following styles in a <style> tag in the <head> tag.

index.css

index.html

.slider-container {

margin: 16px;

position: relative;

overflow: hidden;

}

.container-slides{

display:flex;

flex-direction:row;

flex-wrap:nowrap;

list-style: none;

width: 100%;

height:100px;

margin: 0;

padding: 0;

overflow:hidden;

}

.slide {

width: 100%;

height: 100%;

margin:0px;

flex-shrink: 0;

}

.slide:nth-child(1) {

background-color: red;

}

.slide:nth-child(2) {

background-color:blue;

}

.slide:nth-child(3) {

background-color: green;

}

.slide:nth-child(4) {

background-color: yellow;

}

.arrow-controls{

cursor: pointer;

Although CSS is beyond the scope of this chapter, a couple of things to note here:

The <ul> element is given a fixed height of 250px as we want to move backward and forward a group of li elements with a background color. The <ul> element's overflow property is hidden so that other slides are hidden;
The button controls previous and next are the ones that move the slides back and forth.

Step3: Adding Functionality to the Slider

Now it's the fun part with JavaScript. Add the below code to the script tag after the close of the style tag.

index.html

index.css

<!DOCTYPE html>

<html>

<head>

window.onload = function() {

const containerSlides = document.getElementById('container-slides');

const slideItem = document.querySelector('.slide');

const prevBtn = document.getElementById('prev-arrow');

const nextBtn = document.getElementById('next-arrow');

nextBtn.addEventListener('click', () => {

const widthSlide = slideItem.clientWidth;

containerSlides.scrollLeft += widthSlide;

});

prevBtn.addEventListener('click', () => {

const widthSlide = slideItem.clientWidth;

containerSlides.scrollLeft -= widthSlide;

});

}

</script>

</head>

<body>

</ul>

</div>

</body>

</html>

Program Explanation
Since we've put the <script> tag in the <header> tag, we need to wait till the window loads. You can achieve it with the window.onload() event handler where it is assigned to a function. Then there are four constants and each of which are:

containerSlides: the reference to the <ul> element
sideItem: reference to each slide element;
prevBtn and nextBtn: references to previous slide next and previous buttons.

js
9
1
2
3
4
const containerSlides = document.getElementById('container-slides');
const slideItem = document.querySelector('.slide');
const prevBtn = document.getElementById('prev-arrow');
const nextBtn = document.getElementById('next-arrow');

Then we attach event listeners to the previous and next buttons. After that, attach event listeners to the previous and next buttons. Then in the case of the next button, the scrollLeft property of the <ul> element is increased by the clientwidth, the width of the slide with padding, but not margin, borders or scrollbar.

js
9
1
2
3
4
5
6
7
8
nextBtn.addEventListener('click', () => {
  const widthSlide = slideItem.clientWidth;
  containerSlides.scrollLeft += widthSlide;
});
prevBtn.addEventListener('click', () => {
  const widthSlide = slideItem.clientWidth;
  containerSlides.scrollLeft -= widthSlide;
});

This is it for the time being, and you can experiment with pagination and adding content for sliders for advanced features.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 1