Automatic Card Slider In Html Css Codepen

MUAZHAN

7 min read

·

Jul 03, 2024

41

Share

Automatic Card Slider in HTML, CSS, and CodePen

This article will guide you through creating a simple yet visually appealing automatic card slider using HTML, CSS, and CodePen. We'll focus on a clean and efficient implementation that's easy to understand and customize.

1. Setting up the HTML Structure

First, let's define the basic structure of our card slider using HTML. We'll use a div to represent the slider container and several div elements for each card.

    
    
    
    


    

        

            
            
Card Title 1
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
        

            
            
Card Title 2
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
        

            
            
Card Title 3
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
        

            
            
Card Title 4
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
    

In this code:

• slider-container is the main container for the slider.
• Each card div represents a single card in the slider.
• We've included placeholder image URLs (https://picsum.photos/id/237/300/200), but you can replace them with your own images.

2. Styling with CSS

Now, let's add the CSS styling to create the slider layout and animation.

.slider-container {
    width: 500px;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
}

.card {
    width: 100%;
    height: 250px;
    background-color: #fff;
    margin: 10px 0;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.5s ease;
}

.card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.card h3 {
    margin-bottom: 5px;
}

/* Animation */
.slider-container .card:nth-child(1) {
    transform: translateX(0);
}

.slider-container .card:nth-child(2) {
    transform: translateX(100%);
}

.slider-container .card:nth-child(3) {
    transform: translateX(200%);
}

.slider-container .card:nth-child(4) {
    transform: translateX(300%);
}

In this CSS:

• We style the slider-container to define its dimensions and hide overflowing content (overflow: hidden).
• We style each card with background color, borders, shadows, and flexbox for centering content.
• We use transform: translateX() to initially position the cards outside the visible area.
• The transition property on the card class allows for a smooth animation.

3. Adding Animation with JavaScript (CodePen)

Now, we'll use JavaScript to automatically slide the cards. We'll achieve this by dynamically changing the transform property of each card.

const sliderContainer = document.querySelector(".slider-container");
const cards = document.querySelectorAll(".card");
const cardWidth = cards[0].offsetWidth;
let currentSlide = 0;

function nextSlide() {
    currentSlide++;
    if (currentSlide >= cards.length) {
        currentSlide = 0;
    }

    const translateValue = -currentSlide * cardWidth;
    sliderContainer.style.transform = `translateX(${translateValue}px)`;
}

setInterval(nextSlide, 3000); // Change slide every 3 seconds

In this JavaScript code:

• We get references to the container and card elements.
• We calculate the width of a single card.
• We track the current slide index.
• The nextSlide function shifts the container to the next slide by updating the transform property.
• setInterval triggers the nextSlide function every 3 seconds, creating the automatic slide effect.

4. Putting it Together in CodePen

Now, let's integrate the HTML, CSS, and JavaScript into a CodePen project. Simply copy and paste the code into the corresponding areas. You can customize the colors, dimensions, animation speed, and number of slides to your liking.

Conclusion

This article demonstrated a simple and effective approach to creating an automatic card slider using HTML, CSS, and JavaScript in CodePen. By understanding the basic concepts and applying this example as a foundation, you can easily customize and expand upon this slider to create more complex and visually appealing animations for your websites and projects.