Create an Image Box Card Carousel with Text Overlay in WordPress with Elementor | Portfolio Slider

In this tutorial, I'll show you how to create an Image Box Card Carousel with Text Overlay in WordPress with Elementor and make this Portfolio Slider.

✅Get Elementor Pro:

✅Get code snippet for Elementor Card Carousel:

✅Get this READY-MADE template on TEMPLATISH (including Link Option):

You may see this kind of image carousel with text overlay in a lot of website. But do you know how you can make that image box carousel in your website by using Elementor? So, today I’ll show you the easiest way to make this card carousel with 2 column structure where some of it’s portion goes outside of the screen. And you can fully navigate through it by dragging it on left and right or also by clicking on the arrows.

If you want, you can get this Elementor card slider template from my Gumroad shop. But, if you don't want to get this template, you can also start it from scratch.

First, you need to create a 2 column layout and in the first column take some content. On the right column, take an Testimonial Carousel Widget. Here, on this video, we specifically made an portfolio carousel. Then, we make some styles with the left column content and also added left and right arrows under that as buttons.

For that carousel, first we increase its width and write down some custom CSS code to make that card shape for the sides of this custom carousel. We have also use a slight gradient overlay below the texts. Also make some other styling with the slider.

Then, to enable the left/right arrows, we need to add some classes and also add some JavaScript code. Finally, we make it responsive for tablet and mobile. On mobile, I have placed the arrow buttons at the bottom of the slider.

So, That's how you can create this full width image box slider in Elementor. If you enjoy this video, don't forget to like and subscribe.

[SuccessfullGreatness]

Why the buttons are not working event I have written the javascript code in the html

[hisclarkyness]

That was excellent. Really appreciated. Template ordered. Will keep an eye out for more of your work and content.

[wjckc]

Hard to believe this is two years old. Elementor was capable then and it's an unstoppable powerhouse as of now. While these tutorials and the stuff you sell is still valid and worthwhile, I'd like to see (in a tutorial) how they work in the new container and grid features.

[johnravi]

Hi,

I love your videos. I have watched several Elementor tutorials on your channel, and I have learned a lot from them. I think you are doing a fantastic job with this channel, and I will definitely share this video with my friends to help them learn this trick as well. I am really looking forward to creating the same effect on my next projects and I hope they turn out this great as well. Thanks a lot for sharing such an amazing video.

[franciscoferreyra]

This is EXCELLENT WORK, PERFECT EXECUTION, PERFECT TEACHER. KEEP UP

[learndigitalskills]

Bro. You are pro! I didn't ever think these powers of the testimonial.

[qinpra]

Hi thanks for the video! I also wonder what need to change (the code) so that the carousel can also be partially hidden (like 12:25) on mobile? I can't find any answer&question related to it in the comment section. Thanks in advance

[adityarizkydn]

Hello, really amazing tutorial!
1 Request: Please, could you also add some feature so that if someone click the image it's pop up and visitor can zoom in? Thanks

[LeeHouselander-mx]

This is a great tutorial, can you explain how to add a link to these as well so they go to a specific page?

[teodorafrenyo]

Thank you for your help, this is awesome.

[tetkelly]

This is amazing, thank you so much for sharing this amazing design!

[eclon]

Hi there, I seem to get a horizontal scroll bar as soon as I set the width to a higher standard. With 1200 it does not get the complete screen, so therefore I adjusted it to 1400px. But now I get a horizontal scroll bar? How do I make sure it does not appear?

[chubbec]

Thanks for the video! I can't seem to Drag / Swipe the image slides using the mouse - any ideas why?

[KevinSmutsMusic]

Is it possible to make this slider dynamic with specific posts type in a certain category? For example if I wanted to create this slider on my WooCommerce Shop page or a WooCommerce Product Category Archive page, to pull in the products in a certain category, to be fully automated and dynamic, so that as products are added to that category, they will automatically be added to the slider instead of me needing to create a new slide...

[gerard]

I Don´t nkow with which version of elementor you do it because now with the Versión 3.19.2 itsn´t, please if you can make a new video with the actual version or if you can say me something for help me you can make me happy!! but you still have my like because you help me a lot with your

[spraydecqualitydecorators]

Amazing tutorial! I really love it when existing widgets can be modified creatively. I'd love it even more if you could share the CSS for the overflow to work with the new containers :)

For those asking for the link, you can apply the same principle and same CSS code to the testimonial slider and it works. The testimonial slider has a link field (this should be an option on all sliders!), however, it only works on the text and not the whole slide.

The other thing to point out is the Title is at the bottom and the Name is above it, if you put the category name in the Name field it leaves too much of a gap, as unlike other Elementor widgets, if the Title field is empty it doesn't conditionally not show it and the space it should occupy remains there.

[olubayosam]

Hi bro... Thank you for the tutorial...
Is there a way we can make the Carousel auto sliding?

[mempredator]

Just was having a little trouble with the tablet media size. When I’m tablet mode some of the images seem stretched or not in the right position. Wonder if I cropped them all down to the same size if that would fix my issue, I’ve played around with the css a lot changing object-fit and object-position. Have you ran into this problem?

[Tommaso_Tortato]

Is it possible to make the second slide as if it was the fist to view?
The effect that i want to create is: the second image is highlighted by being taller and bigger than the other two slide at his left and right

[wellpal]

hi, I initially build out the element with the guidance of your video. Worked awesome. As many I needed the slides to link so I purchased your gumroad file. Im trying to upload the template (container) but not sure which json is the one with the link version... 1821 or 1824?

Thank you so much