Styling Carousel Slides

Let's style the container that holds the carousel and the carousel slides using CSS.

Applying Styles to Container

Container HTML

<section id="memory" class="container">
  <div class="content-text">
    <h2>Memories</h2>
    <p>These are my treasured memories</p>
    ...
  </div>
</section>

Container CSS

.container {
  max-width: var(--width-medium);
  margin: 0 auto;
  padding: 16px 32px;
}

.content-text {
  text-align: center;
  margin: 24px 0;
}

.content-text h2 {
  transition: 0.2s ease-in-out;
}

.content-text p {
  padding: 8px;
  margin: 0 auto;
  max-width: 700px;
}

The container uses the max-width property to set the maximum width to the value defined in the --width-medium variable.

The margin: auto property gives automatic side margins to center the container, and the padding property adds space between the container's content and its border.

The container's internal <div> element uses the content-text class.

This class centers the text using the text-align property and applies 24px of vertical margin using the margin property.

The <p> tag uses padding: 8px; to add 8px of space between the text and its border, and margin: 0 auto; to automatically add side margins, centering the text.

Finally, the max-width property sets the maximum width of the p tag to 700px.

Styling Carousel

Carousel HTML

<div class="slideshow-container">
  <div class="my-slides fade">
    <img
      src="https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
      class="slide-image"
    />
    <div class="slide-text">Image Description 1</div>
  </div>

  <div class="my-slides fade">
    <img
      src="https://images.pexels.com/photos/958545/pexels-photo-958545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
      class="slide-image"
    />
    <div class="slide-text">Image Description 2</div>
  </div>
  ...
</div>

Carousel CSS

.slideshow-container {
  padding-top: 24px;
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.my-slides {
  display: none;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

The carousel container uses the slideshow-container class for styling.

This class sets padding: 24px to add 24px of space at the top, limits the maximum width to 1000px using max-width, and positions it relatively using position: relative. The margin: auto; property centers the container.

The carousel slides use the my-slides class for styling.

The display: none; property ensures all slides are initially hidden.

We'll use CSS and JavaScript to show only one slide at a time, preventing multiple slides from being visible simultaneously.

CSS

.slide-image {
  width: 100%;
  height: 320px;
}

.slide-text {
  color: black;
  font-size: 16px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

The images within the slides use the slide-image class for styling.

The image's width is set to 100% using width: 100%;, and its height is fixed at 320px using height: 320px;.

The text within the slides uses the slide-text class for styling.

The color: black; property sets the text color to black, and font-size: 16px; sets the text size to 16px.

padding: 8px 12px; adds 8px of vertical space and 12px of horizontal space around the text.

Using position: absolute, the text is positioned absolutely.

Absolute positioning means the element is positioned relative to its nearest positioned ancestor that is not static, which in this case is the slideshow-container with position: relative.

Without position: absolute, the text would overflow out of the carousel, so be sure it’s included!

The bottom: 8px; property places the text 8px from the bottom of the slide, and width: 100%; sets the width to 100%.

Finally, the text-align property centers the text horizontally.

A visual effect when transitioning slides makes it clearer when the slide changes.

The fade class applied to the div holding the slides gives a fade animation, adjusting opacity as slides transition.

Check out the CSS below:

fade Animation CSS

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

The fade class uses animation-name and animation-duration properties.

animation-name specifies the name of the keyframe to use for the animation, in this case, fade.

animation-duration sets the time for one play cycle, which is 1.5 seconds here.

The @keyframes CSS rule defines the keyframe animation.

Using keyframes, the fade animation is defined with from starting at opacity: 0.4 and to finishing at opacity: 1.

CSS opacity ranges from 0 (fully transparent) to 1 (fully opaque).

Thus, the .fade animation makes elements transition their opacity smoothly from 0.4 to 1 over 1.5 seconds, creating a fade-in effect for changing slides.

Next, let's style the carousel buttons!

Want to learn more?

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

Learn moreSign In