본문으로 건너뛰기

Carousel HTML

Example Code

Now, let's create the structure of a carousel using HTML.

Below is the complete HTML code for the carousel, and we will break it down step by step.

Carousel HTML
<section id="memory" class="container">
<div class="content-text">
<h2>Memories</h2>
<p>These are my precious memories</p>
<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 class="my-slides fade">
<img
src="https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
class="slide-image"
/>
<div class="slide-text">Image Description 3</div>
</div>

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

<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>
</div>
</section>

코드를 하나씩 살펴볼까요?


Container

Carousel Container HTML
<section class="container">
<div class="content-text">...</div>
</section>

I created a container for placing the carousel in a specific area of the webpage.

The container uses the HTML section tag to designate the area for the carousel within the webpage.

For this, the area is wrapped with the <section> tag and the container class is used to identify the container.

Inside the container, a <div> tag is created and the content-text class is used to apply styles to the title and description.


Container

Carousel Container HTML
<section class="container">
<div class="content-text">...</div>
</section>

I created a container to place the carousel in a specific area of the webpage.

The container utilizes the HTML section tag to define the carousel's area within the webpage.

For this, I wrapped the area with a <section> tag and used the container class to identify the container.

Inside the container, I created a <div> tag and used the content-text class to apply styling to the title and description.


Title and Description

Carousel Title & Description HTML
<h2>Memories</h2>
<p>These are my precious memories</p>

For a brief title and description explaining the content contained in the carousel,

I used the <h2> tag and <p> tag.


Slides

Carousel Slides 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 class="my-slides fade">
<img
src="https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
class="slide-image"
/>
<div class="slide-text">Image Description 3</div>
</div>
...
</div>

The outermost <div> element with the slideshow-container class serves as the container for the "slides" holding the content of the carousel.

This container holds three slides, each consisting of an image and a description.

Each slide is wrapped in a <div> with the my-slides class. While the example code shows three slides, you can add more slides like this:

Slide Composition Example
<div class="my-slides fade">Slide Content</div>

You can add more slides in this manner.

Each slide displays an image using the HTML <img> tag, applying the slide-image class for styling the slide images. Additionally, a <div> element with the slide-text class is used to add a description to the images.

Slide Composition Example
<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>

Creating Previous / Next Buttons

Previous/Next Buttons HTML
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

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

The buttons for moving the carousel to the previous and next slides are made using HTML <a> elements.

The button with the prev class moves the carousel to the previous slide, while the button with the next class moves it to the next slide.

When the user clicks a button, a JavaScript function assigned to each button is called.

For example, when the button containing the prev class is clicked, the plusSlides(-1) function is called, moving the carousel from the current slide to the previous slide.

Similarly, when the button containing the next class is clicked, the plusSlides(1) function is called, moving from the current slide to the next slide.


Indicator

Indicator Buttons 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>

Indicators represent the currently displayed slide, and clicking an indicator allows you to move to a specific slide.

For this carousel, I'll use dots as indicators.

Each indicator is composed of a <span> element and has the dot class.

Clicking an indicator calls the currentSlide function, which moves to the specific slide.


So far, we have used HTML to construct the layout of the carousel.

However, as mentioned earlier, HTML alone cannot transition the carousel to the previous or next slide. To create a carousel that rotates while transitioning slides, we need to use JavaScript.

Before implementing the functionality with JavaScript, shall we briefly decorate the carousel with CSS?