본문으로 건너뛰기

Decorating Carousel Buttons

Now, let's decorate the previous/next buttons and indicator slides of the carousel using CSS.


Styling 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);
}

Buttons, being interactive elements that respond to actions like mouse hover or clicks, require more detailed visual effects through CSS styling.

Let's now take a look at how the carousel is styled.

Firstly, the previous and next buttons are styled using the prev and next classes. The common parts of the prev and next classes are:

Common CSS for Previous/Next Buttons
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
...;
}

Common styles like the above are applied to multiple classes. You can define CSS classes for common elements using a comma (,) to separate them.

On the other hand, the distinct parts of prev and next are defined separately in CSS classes as follows:

Individual CSS for Previous/Next Buttons
.prev {
left: 0;
}

.next {
right: 0;
}

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


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

  • cursor: pointer;: This changes the mouse cursor to a finger shape when hovering over the previous/next buttons.

  • position: absolute;: Similar to the text inside the slides, the previous/next buttons are absolutely positioned within the carousel.

  • top: 50%; This positions the buttons at 50% from the top, essentially centering them vertically in the slide.

  • width: auto; The width of the buttons automatically adjusts to the width of the content.

  • padding: 16px; This sets a 16px padding inside the buttons.

  • margin-top: -22px;: To vertically center the buttons, the top margin is set to -22px, pulling the button 22px inwards. This is because using only top: 50% positions the top margin of the button at 50%, making the element slightly lower than the vertical center.

  • color: white; sets the button text color to white.

  • font-weight: bold; makes the text bold.

  • font-size: 18px; sets the text size to 18px.

  • transition: 0.6s ease; creates a 0.6-second transition for the button's background color when hovered over.

  • border-radius: 4px; rounds the corners of the buttons by 4px.

  • user-select: none; prevents text dragging. This ensures the button text isn't draggable, which could look untidy, while still allowing mouse clicks.


Finally, let's examine the meaning of this CSS code:

When Mouse Hovers Over Previous/Next Buttons
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

.prev:hover and .next:hover specify the styles for when the mouse hovers over the previous (prev) and next (next) buttons on the webpage.

:hover is a pseudo-class selector in CSS, defining styles that apply only when the mouse is over the element with the specified class.

Background-color is a property that specifies the background color. The value used here, rgba(0, 0, 0, 0.8), indicates a background color of black (#000000) with an opacity of 0.8. Due to this CSS, when the mouse hovers over the button elements, the background color of the previous and next buttons changes to black with an opacity of 0.8.

So far, we have used CSS to beautifully style the previous/next buttons of the carousel! Now, shall we decorate the dot indicators that move to specific parts of the slide?


Indicator CSS Style

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. Indicators have interactive elements that move to the corresponding slide when clicked.