Styling Carousel Buttons

Let's style the previous/next buttons and the slide indicators of a carousel using CSS.

Styling the Previous / Next Buttons

Previous/Next Buttons HTML

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

Previous/Next Buttons CSS

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 4px;
  user-select: none;
}

.prev {
  left: 0;
  border-radius: 4px;
}

.next {
  right: 0;
  border-radius: 4px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

Since buttons can interact with the user by hovering or clicking, you need to apply more detailed visual effects using CSS.

Let's check out how we styled the carousel.

Firstly, the previous and next buttons are styled using the prev and next classes. Common styles for the prev and next classes are:

Common CSS for Previous/Next Buttons

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  ...;
}

We applied the common styles as shown above. Common parts across multiple classes can be defined in CSS by separating the class names with a comma.

On the other hand, the non-common parts for prev and next are defined separately as shown below:

Individual CSS for Previous/Next Buttons

.prev {
  left: 0;
}

.next {
  right: 0;
}

The left arrow button with the prev class is positioned to the left of the slide (left: 0), and the right arrow button with the next class is positioned to the right of the slide (right: 0).

Let's take a closer look at the common styles:

• cursor: pointer;: Changes the cursor to a pointer when hovering over the previous/next buttons.
• position: absolute;: Positions the buttons absolutely within the carousel.
• top: 50%;: Positions the buttons at the vertical center of the slide.
• width: auto;: Makes the button width adapt to the content width.
• padding: 16px;: Sets the padding inside the button to 16px.
• margin-top: -22px;: Offsets the button upwards by 22px to center it vertically.
• color: white;: Sets the text color to white.
• font-weight: bold;: Sets the font weight to bold.
• font-size: 18px;: Sets the font size to 18px.
• transition: 0.6s ease;: Smoothly changes the background color over 0.6 seconds when hovered.
• border-radius: 4px;: Rounds the corners of the button by 4px.
• user-select: none;: Prevents the text inside the button from being selected or dragged.

Lastly,

Hover Effect for Previous/Next Buttons

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

Let's understand what this CSS code means.

.prev:hover and .next:hover specify the style when the previous (prev) and next (next) buttons are hovered.

:hover is a CSS pseudo-class that applies styles only when the mouse hovers over the element.

The background-color property specifies the background color. rgba(0, 0, 0, 0.8) means black (#000000) with an opacity of 0.8. This code makes the background of the buttons turn black with 0.8 opacity when hovered.

We have successfully styled the previous/next buttons on the carousel using CSS! Now let's style the dot indicators that navigate to specific slides.

Styling the Indicators

Indicator HTML

<div style="text-align: center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

Indicator CSS

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

The indicators are styled using the dot class. The indicators interact with the user by navigating to the corresponding slides when clicked.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.

Learn moreSign In