Create Infinite Carousel Using HTML and CSS

Faraz

By Faraz -

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 Alsoboost your sales with a responsive html and css product landing page.jpgBoost Your Sales with a Responsive HTML and CSS Product Landing Page

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

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:

  1. Basic knowledge of HTML and CSS.
  2. A code editor like VS Code or Sublime Text.
  3. 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

  1. <div class="carousel">
    • A container for the carousel.
    • It has styles in styles.css for dimensions, overflow handling, and aesthetics.
  2. <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.
  3. <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).
Read Alsoi built a clone of google using html and css.pngHow I Created a Google Clone with HTML and CSS

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 AlsoSimple Steps to Create a Draggable HTML Element with JavaScript.jpgSimple Steps to Create a Draggable HTML Element with JavaScript (Source code)

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

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺