Create Infinite Carousel Using HTML and CSS

By Faraz - November 15, 2024

Learn how to create a smooth infinite autoplay carousel using HTML and CSS. Follow our step-by-step guide to design stunning carousels for websites.

Join us on Telegram

create-infinite-autoplay-carousel-using-html-and-css.webp

Read Also Create Music Streaming App Landing Page HTML & CSS Tutorial.webp

Create Music Streaming App Landing Page: HTML & CSS Tutorial (Source Code)

Adding animations and interactivity to a website can enhance the user experience. A carousel is a popular feature that showcases images, text, or content in a sliding manner. In this blog, we’ll guide you on how to create an infinite carousel using HTML and CSS. It’s simple to design and perfect for websites or portfolios.

Prerequisites

To follow this tutorial, you need:

Basic knowledge of HTML and CSS.
A code editor like VS Code or Sublime Text.
Images to use in the carousel.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our carousel.

Here's a detailed explanation of each part:

1. `<!DOCTYPE html>`

Declares the document type as HTML5, ensuring the browser renders the page correctly.

2. `<html lang="en">`

Starts the HTML document.
The lang="en" attribute specifies that the language of the document is English.

3. `<head>`

Contains metadata and resources for the page.
Includes:
- <meta charset="UTF-8">: Specifies the character encoding (UTF-8) to handle various symbols and languages.
- <title>Infinite Carousel</title>: Defines the title of the page that appears on the browser tab.
- <link rel="stylesheet" href="styles.css">: Links an external CSS file named styles.css to style the page.

4. `<body>`

Contains the visible content of the webpage.

Carousel Structure

<div class="carousel">
- A container for the carousel.
- It has styles in styles.css for dimensions, overflow handling, and aesthetics.
<div class="wrap">
- Contains all the images of the carousel.
- The wrap class is used to apply grid styling and animation to create the sliding effect.
<img src="..." alt="">
- Represents individual images in the carousel.
- The src attribute specifies the image's URL:
  - Example: https://www.codewithfaraz.com/im...
- The alt attribute provides alternative text for accessibility (it's empty in this case).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Infinite Carousel</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="carousel">
        <div class="wrap">
            <img src="https://www.codewithfaraz.com/img/code%20with%20Faraz-1.jpg" alt="">
            <img src="https://www.codewithfaraz.com/img/code%20with%20Faraz-2.jpg" alt="">
            <img src="https://www.codewithfaraz.com/img/code%20with%20Faraz-3.jpg" alt="">
            <img src="https://www.codewithfaraz.com/img/code%20with%20Faraz-4.jpg" alt="">
            <img src="https://www.codewithfaraz.com/img/code%20with%20Faraz-1.jpg" alt="">
            <img src="https://www.codewithfaraz.com/img/code%20with%20Faraz-2.jpg" alt="">
            <img src="https://www.codewithfaraz.com/img/code%20with%20Faraz-3.jpg" alt="">
            <img src="https://www.codewithfaraz.com/img/code%20with%20Faraz-4.jpg" alt="">
        </div>
    </div>
</body>
</html>

Read Also

GitHub Profile Finder: Build with HTML, CSS, and JavaScript in Easy Steps

Step 2 (CSS Code):

Now, style the carousel and apply the animation. Here’s a detailed breakdown of each section:

1. General Body Styling

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #825CFF;
}

display: flex: Centers content within the body using Flexbox.
justify-content: center: Horizontally centers the carousel.
align-items: center: Vertically centers the carousel.
height: 100vh: Sets the height of the body to the full viewport height.
margin: 0: Removes default body margins.
background-color: #825CFF: Gives the background a purple shade.

2. Carousel Container Styling

.carousel {
  width: 600px;
  overflow: hidden;
  border: 5px solid transparent; 
  border-radius: 20px;
  background-image: linear-gradient(#825CFF, #825CFF), 
                    linear-gradient(90deg, #ff7eb3, #ff758c, #825CFF);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 
}

width: 600px: Sets the width of the carousel container.
overflow: hidden: Ensures that content outside the container (e.g., sliding images) is clipped.
border: 5px solid transparent: Creates space for a decorative gradient border without affecting content dimensions.
border-radius: 20px: Rounds the corners of the carousel.
background-image:
- First gradient applies a solid background color.
- Second gradient adds a multicolor border effect using background-clip.
background-origin: border-box: Ensures the second gradient is drawn starting from the border box.
background-clip: content-box, border-box: Clips the first gradient to the content area and the second gradient to the border area.
box-shadow: Adds a shadow around the container for a raised effect.

3. Wrapper for Images

.wrap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 250px;
  justify-items: stretch;
  animation: slide 15s linear infinite;
  animation-play-state: running;
}

display: grid: Arranges images in a grid layout.
grid-auto-flow: column: Lays out images in a single horizontal row.
grid-auto-columns: 250px: Each grid item (image) takes up 250px width.
justify-items: stretch: Ensures items stretch to fill their allocated grid space.
animation: slide 15s linear infinite: Animates the grid using the slide keyframes over 15 seconds in a continuous loop.
animation-play-state: running: Ensures the animation is playing unless paused.

4. Image Styling

.wrap img {
  width: 200px;
  height: 200px;
  border-radius: 15px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

width & height: Sets image dimensions to 200x200px.
border-radius: 15px: Rounds the image corners.
object-fit: cover: Ensures images maintain aspect ratio while filling their container.
border: 3px solid rgba(255, 255, 255, 0.5): Adds a semi-transparent white border around each image.
transition: Smoothly animates changes in transform and box-shadow properties.
box-shadow: Adds a subtle shadow behind each image.

5. Image Hover Effect

.wrap img:hover {
  transform: scale(1.1); 
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.8), 0 4px 20px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.8); 
}

transform: scale(1.1): Scales up the image by 10% on hover.
box-shadow: Adds a stronger, more prominent shadow on hover.
border-color: Changes the border to a brighter white during hover.

6. Pause Animation on Hover

.wrap:hover {
  animation-play-state: paused;
}

animation-play-state: paused: Stops the sliding animation when the user hovers over the carousel.

7. Keyframes for Sliding Animation

@keyframes slide {
  to {
    translate: calc(-4 * 250px);
  }
}

@keyframes slide: Defines the sliding animation for the grid.
to { translate: calc(-4 * 250px); }: Moves the grid to the left by -4 * 250px (the width of 4 images), creating a smooth sliding effect.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #825CFF;
}

.carousel {
  width: 600px;
  overflow: hidden;
  border: 5px solid transparent; 
  border-radius: 20px;
  background-image: linear-gradient(#825CFF, #825CFF), 
                    linear-gradient(90deg, #ff7eb3, #ff758c, #825CFF);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 
}

.wrap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 250px;
  justify-items: stretch;
  animation: slide 15s linear infinite;
  animation-play-state: running;
}

.wrap img {
  width: 200px;
  height: 200px;
  border-radius: 15px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.wrap img:hover {
  transform: scale(1.1); 
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.8), 0 4px 20px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.8); 
}

.wrap:hover {
  animation-play-state: paused;
}

@keyframes slide {
  to {
    translate: calc(-4 * 250px);
  }
}

Final Output:

create-infinite-autoplay-carousel-using-html-and-css.gif

Read Also Create a Stunning Booking App Interface with HTML, CSS, and JS.webp

Create a Stunning Booking App UI with HTML, CSS, and JavaScript (Source Code Included)

Conclusion:

Creating an infinite carousel using HTML and CSS is an excellent way to add dynamic and visually appealing elements to your website. It enhances user engagement and makes your design look modern. Try customizing the carousel with different images or speeds to suit your needs.

With this guide, you can build a carousel easily, even as a beginner.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create an infinite carousel using html and css, step-by-step guide for infinite carousel design, html and css carousel tutorial for beginners, infinite autoplay carousel, carousel without javascript, infinite carousel, html carousel, css animation

End of the article

Latest Post

Create Car Registration System Using HTML, CSS, and JavaScript

by Faraz - December 08, 2024

Learn how to create a simple car registration system with HTML, CSS, and JavaScript in this easy step-by-step guide. Build a functional and attractive form with minimal code.