JavaScript Click Carousel Example

Go back to JavaScript Index

In this tutorial, we will be creating a "click" carousel, like the one shown here:

The Carousel

Page 1

Click on the left side of the box to go to the previous page

Click on the right side of this box to go to the next slide

Page 2

Click on the left side of the box to go to the previous page

Click on the right side of this box to go to the next slide

Page 3

Click on the left side of the box to go to the previous page

Click on the right side of this box to go to the next slide

The example is better suited for pages taking up full screen. Some adjustments are needed to make it more user friendly when it only takes up a small portion of the site.

The HTML

The HTML in the example consist of a container that holds the pages/slides.

index.html

<div>
<div class="page">
<p>Page 1<p>
</div>
<div class="page">
<p>Page 2<p>
</div>
<div class="page">
<p>Page 3<p>
</div>
</div>
1.0 | The HTML

Each image (or slide) has the class name "slide", and they are all children of the container (div).

The CSS

Obviously the example uses some of the style instructions of this site, but in this tutorial I will focus on the style instructions necessary to create the actual carousel:

style.css

.page {
display: none;
}
1.1 | The CSS

The CSS is used to hide all of the pages or slides in our carousel.

The JavaScript

The JavaScript used to create the example looks like this:

carousel.js

let index = 1;

let pages = Array.from(document.getElementsByClassName("page"));

pages[index - 1].style.display = "block";

const carousel = (e) => {
let posX = e.clientX;
let viewportCenter = window.innerWidth / 2;
pages.forEach(page => page.style.display = "none");
if (posX > viewportCenter) {
index++;
if (index > pages.length) {
index = 1;
}
} else {
index--;
if (index < 1) {
index = pages.length;
}
}

pages[index - 1].style.display = "block";
}

document.addEventListener("click", carousel);
1.2 | The JS

The index variable is used as a counter.

The pages variable is used to store an array of all the elements that has the class name "page".

The page with the index number - 1 is set to display block.

A function called carousel is declared using the const keyword and the arrow syntax. It takes one parameter: e - the event that triggerede the function.The function does a number of things:

  • It gets the position on the x-axis of the mouse and stores it in the variable posX.
  • It also finds the center of the viewport by getting the innerwidth of the window and dividing it by 2. It stores the information in the variable viewportcenter.
  • It iterates through the array of elements with class name page and hides each of them.
  • A conditional statement is then used to either 1) increment the value of index, if the position of the mouse when clicked is greater than the value of viewportCenter, or 2) decrement the value of index, if the position of the mouse on the x-axis is less than the value of viewportCenter when the click happens. Each of the statement blocks contain another conditional statement that resets the value of index to fit the number of elements in the array.
  • After considering all of the above, the function then sets the display property of the slide that it has reached to block, displaying it on screen.

Outside the function, an event listener is added to the document to call the carousel function each time a click occurs.