How to Create an Image Box Card Carousel with Text Overlay in Elementor WordPress

Want to get this as the ready-made template with just 1 CLICK INSTALL?

Hello everyone! If you’ve ever noticed those sleek card carousels on modern websites and wondered how to create one using Elementor, you’re in the right place. In this guide, I’ll show you the easiest way to build a card carousel with a two-column structure. Some portions of the carousel extend outside the skin, and you can navigate effortlessly by dragging left or right—or simply clicking the navigation arrows.

Let’s dive into the tutorial!

Option 1: Download the Ready-Made Template

If you prefer a quick solution, you can download my pre-designed card carousel template for just $2.99. Upon downloading, you’ll receive a JSON file. Here’s how to use it:

1. Upload the Template
   • Go to your Elementor editor and navigate to the “Templates” upload option.
   • Drag and drop the JSON file or select it manually.
   • Click “Insert” to apply the carousel to your page.
2. Publish and Preview
   • Click Publish, then preview the page.
   • The carousel will work perfectly on desktop, tablet, and mobile devices.

If you’re ready to start fresh, keep reading!

Option 2: Build the Card Carousel from Scratch

Step 1: Set Up a Two-Column Structure

1. Create a New Section
   • Add a two-column structure.
   • Set the left column width to 30% and the right column to 70%.
2. Style the Left Column
   • Add a heading, a paragraph, and a button to the left column.
   • Customize the typography, colors, and alignment:
     • Font: Poppins
     • Heading Size: 30px
     • Button: Transparent background, bold uppercase text
3. Background Styling
   • Apply a background color to the left column.
   • Adjust the alignment to ensure all elements are centered vertically.

Step 2: Add the Carousel to the Right Column

1. Insert a Testimonial Carousel
   • Drag a testimonial carousel widget into the right column.
   • Set the number of slides per view to 3.
2. Customize Slide Content
   • Add images as slide backgrounds.
   • Include a title and subtitle for each slide.
   • Adjust typography and colors for a polished look.
3. Duplicate Slides
   • Duplicate slides to create up to six cards.
   • Replace the images and text in each slide as needed.

Step 3: Add Navigation Arrows

1. Add Buttons for Arrows
   • Below the carousel, add two buttons for navigation arrows.
   • Insert arrow icons for the left and right buttons.
2. Style the Buttons
   • Set transparent backgrounds with bold black borders.
   • On hover, change the background color to black and text color to white.
3. Add Functionality
   • Use custom CSS (available in Elementor Pro) to link the buttons to the carousel navigation.
   • Add a unique CSS class to the carousel and buttons for functionality.

CSS code snippet on Testimonial Carousel Widget:

selector{
    --radius: 25px;
    --height: 550px;
    --overlay: 0.75;
}

selector .swiper-slide{
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius);
    height: var(--height);
}
selector .swiper-slide:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0,0,0);
    background: linear-gradient(20deg, rgba(0,0,0,var(--overlay)) 0%, rgba(0,0,0,0) 100%);
    height: 100%;
    width: 100%;
    z-index: 1;
    
}
selector .elementor-testimonial__footer{
    display: block;
}
selector img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
}
selector .elementor-testimonial__cite{
    z-index: 2;
    position: relative;
}
selector .elementor-testimonial__name{
    margin-bottom: 10px;
}
selector .elementor-swiper-button-prev,
selector .elementor-swiper-button-next{
    display: none;
}


@media (max-width: 1024px){
selector{
    --height: 370px;
}
}
@media (max-width: 767px){
selector .elementor-main-swiper{
    width: 100% !important;
}
}

JavaScript code snippet for Left/Right Navigation:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    
    $('.card-carousel .card-prev').on('click', function(){
        
        $(this).closest('.card-carousel').find('.elementor-swiper-button-prev').trigger('click')
        $(this).closest('.card-carousel').find('.swiper-container').trigger('mouseleave')
    })
    
    $('.card-carousel .card-next').on('click', function(){
        $(this).closest('.card-carousel').find('.elementor-swiper-button-next').trigger('click')
        $(this).closest('.card-carousel').find('.swiper-container').trigger('mouseleave')
    })
    
    $('.card-carousel .card-prev a, .card-carousel .card-next a').on('click', function(e){
        e.preventDefault()
    })
})
</script>

Responsive Adjustments

1. Tablet Mode
   • Set the container direction to vertical.
   • Adjust slide settings to display three cards per view.
2. Mobile Mode
   • Reduce the heading size to 20px and the subheading size to 16px.
   • Ensure all elements are properly aligned with zero margins and padding.

Conclusion

Creating a card carousel in Elementor is simple and versatile! Whether you choose to download the template or build it from scratch, this design is sure to enhance your website’s interactivity and visual appeal.

Thank you for reading, and I’ll see you in the next tutorial!