How to Create Animated Image Carousel with CSS Step by Step

Creating a visually appealing and functional website is a foundational skill for web developers and enthusiasts. This guide will take you through the process of building a stylish homepage using HTML and CSS, specifically focusing on implementing a logo slider.

We’ll use two files: index.html for the structure and style.css for the styling. Here’s a breakdown of the steps we’ll follow.

Understanding The Basic Setup

• index.html: This file acts as the homepage of your website. It will contain the HTML structure, including elements like divs, classes, and image tags.
• style.css: This file is used to style your HTML elements. Here, you’ll define styles like colors, dimensions, and positions.

Choice of Tools

• Visual Studio Code: A popular code editor, but any text editor can be used for this purpose.

Creating the HTML Structure

Setting Up the Wrapper and Slider

• Wrapper Code: This is a container that holds various elements of your webpage. It’s essential for positioning and organizing content.
• Slider Div: Inside the wrapper, we add a slider div, which will be the container for our sliding logos.

Adding Logos

• Slide Class: Each logo is placed inside a div with a class of ‘slide’. This class will be crucial in styling and animating the logos.
• Image Tags: Insert image tags within the slide class. Here, you can add various logos, like ‘binance.png’.

<div class="slider">
  <div class="slide">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
  </div>
  <div class="slide">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
    <img src="binance.png" alt="">
  </div>
</div>

Styling with CSS

Basic Styling

• Body Tag: Assign a background color or other styles to the body of your webpage.
• Wrapper Class: Center the elements inside the wrapper on the page.

Logo Slider

• Box Shadow: Add a shadow to your logo slider area for a sleek look.
• Slide Class Styling: Set the height, display properties (like flex), and align-items to center the logos correctly.

Fixing Logo Alignment and Spacing

• Image Tag Styling: Adjust the height and padding of the logos to ensure they are well-spaced and aligned.
• Display Flex: To line up logos side by side instead of one below the other.

.wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider {
    width: 1000px;
    height: 100px;
    position: relative;
    background: white;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.2);
    display: flex;
    overflow: hidden;
}

.slide {
    height: 100px;
    display: flex;
    align-items: center;
    animation: slideshow 10s linear infinite;
}

.slide img {
    height: 70px;
    padding: 0 30px 0 30px;
}

@keyframes slideshow {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.slider::before,
.slider::after {
    height: 100px;
    width: 200px;
    position: absolute;
    content: "";
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.slider::before {
    left: 0;
    top: 0;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

Animating the Logos

Keyframe Animation

• Keyframe Property: Use keyframes to create a scrolling effect from left to right.
• Animation Property: Add an animation property in the Slide class to define the duration, timing, and iteration of the animation.

Enhancing the Slider

• Overflow Handling: Set ‘overflow:hidden’ to prevent logos from spilling outside the designated area.
• Continuous Loop: Duplicate the Slide class in HTML to create a continuous sliding effect.

Final Touches

Adding Gradient and Transparency

• Position Absolute: Apply this to add a gradient effect on the edges.
• Before and After Properties: Use these to create a soft entrance and exit effect for the logos.

Conclusion

Creating a logo slider using only HTML and CSS is an excellent exercise in understanding web page layout and animation. By following these steps, you can create a dynamic and visually appealing component for your website. Remember, practice and experimentation are key to mastering web development skills.