Simple Image Carousel

Enhance visual appeal on your website with a simple image carousel. Learn how to implement an image carousel to showcase dynamic content effectively and engage users with captivating visuals.

Preview
Code

<div class="carousel">
  <div class="carousel-controls">
    <input id="1" type="radio" name="controls" checked />
    <input id="2" type="radio" name="controls" />
    <input id="3" type="radio" name="controls" />
    <div class="dots">
      <label for="1"></label>
      <label for="2"></label>
      <label for="3"></label>
    </div>
    <div class="carousel-images">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-1/1.jpg" />
      <img src="https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-1/2.jpg" />
      <img src="https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-1/3.jpg" />
    </div>
  </div>
</div>

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

html,
body,
.carousel {
  height: 100%;
}

.carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.carousel-images {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  width: 300%;
  height: 100%;
  transition: 0.5s;
}

.carousel img {
  width: 100%;
  object-fit: cover;
}

.carousel-controls {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

input {
  display: none;
}

input,
label {
  position: relative;
  z-index: 2;
}

label {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.3;
  backdrop-filter: blur(20px);
  cursor: pointer;
  transition: 0.3s;
}

.dots {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 400px;
  background: linear-gradient(transparent, #000 90%);
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 50px;
}

input:nth-child(1):checked ~ .dots label:nth-child(1),
input:nth-child(2):checked ~ .dots label:nth-child(2),
input:nth-child(3):checked ~ .dots label:nth-child(3) {
  background: rgba(255, 255, 255, 0.95);
  opacity: 1;
  backdrop-filter: none;
}

input:nth-child(1):checked ~ .carousel-images {
  translate: 0;
}

input:nth-child(2):checked ~ .carousel-images {
  translate: -100vw;
}

input:nth-child(3):checked ~ .carousel-images {
  translate: -200vw;
}

```
No need of JavaScript
```

A simple image carousel is a great way to showcase multiple images in a small space on your website. This tutorial will guide you through creating and customizing a basic image carousel using HTML and CSS.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippets. This includes the structure and basic styles required to create a functional image carousel.

Step 2: Link CSS

Ensure the styles.css file is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles:
```
<link rel="stylesheet" href="styles.css">
```

Step 3: Customize and Make it Yours

Customize the image carousel to match your website's theme and functionality requirements. Modify the HTML structure to include more images, adjust CSS styles (styles.css) for sizes, colors, and animations, and enhance JavaScript logic (script.js) for more sophisticated carousel behaviors.

By following these steps, you can implement and personalize a simple image carousel using HTML and CSS, enhancing the visual appeal of your website.

Code Explanation

HTML Code

Carousel Wrapper:

<div class="carousel">

This div serves as the outer wrapper for the carousel.

Carousel Controls:

<div class="carousel-controls">

Contains the radio buttons and images for the carousel.

Radio Buttons:

<input id="1" type="radio" name="controls" checked />
<input id="2" type="radio" name="controls" />
<input id="3" type="radio" name="controls" />

Three radio buttons with IDs 1, 2, and 3.
The name attribute is the same for all, linking them together.
The checked attribute on the first radio button makes it the default selected option.

Dots for Navigation:

<div class="dots">
  <label for="1"></label>
  <label for="2"></label>
  <label for="3"></label>
</div>

This div contains labels that act as navigation dots.
Each label is linked to the corresponding radio button using the for attribute.

Carousel Images:

<div class="carousel-images">
  <img src="https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-1/1.jpg" />
  <img src="https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-1/2.jpg" />
  <img src="https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-1/3.jpg" />
</div>

This div contains the images for the carousel.
Each img tag points to an image source URL.

CSS Code

Basic Resets and Box Sizing:

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

Removes default margin from the body to avoid unwanted spacing.
Sets box-sizing: border-box; for all elements to include padding and border in the element's total width and height.

Height Configuration:

html,
body,
.carousel {
  height: 100%;
}

Ensures that html, body, and .carousel elements take up the full height of the viewport.

Carousel Container:

.carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}

overflow: hidden; hides any content that overflows the bounds of the carousel.
position: relative; positions the carousel relatively for the absolute positioning of its children.
width: 100%; makes the carousel take up the full width of its container.

Carousel Images:

.carousel-images {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  width: 300%;
  height: 100%;
  transition: 0.5s;
}

.carousel img {
  width: 100%;
  object-fit: cover;
}

.carousel-images uses position: absolute; to position the image container.
display: flex; arranges child images in a row.
width: 300%; sets the container's width to three times the width of its parent, accommodating three images.
transition: 0.5s; smoothens the transition effect when changing images.
.carousel img sets each image to take up 100% of its container's width and cover the container.

Carousel Controls:

.carousel-controls {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.carousel-controls positions the controls absolutely, taking up the full width and height of the carousel, with a higher z-index to be on top of images.
Aligns controls to the bottom-right corner.

Inputs and Labels:

input {
  display: none;
}
input,
label {
  position: relative;
  z-index: 2;
}
label {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.3;
  backdrop-filter: blur(20px);
  cursor: pointer;
  transition: 0.3s;
}

input elements are hidden using display: none;.
Both input and label have a relative position and higher z-index.
label elements (dots) are styled as circular buttons with a semi-transparent background and blur effect.
label elements have a pointer cursor and a transition effect for smooth background and opacity changes.

Dots Container:

.dots {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 400px;
  background: linear-gradient(transparent, #000 90%);
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 50px;
}

.dots positions the dots container at the bottom of the carousel with a linear gradient background.
Uses display: flex; to align dots horizontally with space between them.
Pads the bottom for spacing.

Checked States and Transitions:

input:nth-child(1):checked ~ .dots label:nth-child(1),
input:nth-child(2):checked ~ .dots label:nth-child(2),
input:nth-child(3):checked ~ .dots label:nth-child(3) {
  background: rgba(255, 255, 255, 0.95);
  opacity: 1;
  backdrop-filter: none;
}
input:nth-child(1):checked ~ .carousel-images {
  translate: 0;
}
input:nth-child(2):checked ~ .carousel-images {
  translate: -100vw;
}
input:nth-child(3):checked ~ .carousel-images {
  translate: -200vw;
}

Changes the background, opacity, and blur effect of the dot labels when the corresponding radio button is checked.
Translates the .carousel-images container to show the appropriate image when a radio button is checked.
Uses translate to shift the images left by 100vw or 200vw based on which radio button is selected.