Elementor Advanced Slider with Card Carousel | WordPress Custom Slider Design with Text and Image

In this tutorial, I'll show you how to make an Elementor Advanced Slider with Card Carousel. This video is about WordPress Custom Slider Design with Text and Image.

✅Get Elementor Pro:

✅Get code snippet for Advanced Slider:

✅Get this READY-MADE template on TEMPLATISH:

Today, I’ll show you how you can make an advanced card slider (full width) in your Elementor website. Here, on the right side there is a mini card carousel and when you change that carousel, everything is changing according to that: the background image, the content on the left side. On the very left you can see an indicator which are also perfectly working. The transitions are also so smooth, so when we go to forward we can see the forward animation and when we go to the previous slide we can also see the backward animation. This custom slider is also 100% responsive. It’s perfectly working on the tablet, mobile or any other devices.

If you want, you can get this advanced slider template from my template shop. Here also as a bonus, you'll also get the non-container version of that. But, if you don't want to get this advanced card carousel template, you can also start it from scratch.

First, we need to take a 2 column structure where on the left column we'll take the indicator and the texts. Here, we've take some heading, text and button widget and design that.

Then, on the right side take an testimonial carousel widget and transform that into a custom card carousel. Under that, also take 2 arrows by using the button widget and make them functional.

With the text on the left, we have also added the changing effect. For that, we need to duplicate those content multiple times. Finally, we have also added the background images for each slide which is changing with our carousel change.

Lastly, we make it responsive for the tablet and mobile devices. And on mobile, we place the dots at the very bottom of the section.

So that's how we can successfully created our Elementor advanced portfolio slider animation with text and image. If you enjoy this video, don’t forget to like and subscribe.

[CyberImpact]

Another stunning masterpiece, thank you for sharing your knowledge, i happy to learn from the best!

[StarleneBreiter]

This is absolutely beautiful, thank you for the tutorial. I went through the entire tutorial and made the slider on my website, it took me several hours to create. I am not a professional web designer I've taught myself, which is why I was slower creating it. I had some trouble with making it responsive, which I am sure that was due to me missing something, so I decided to just buy the code from you. I installed it right away and changed the pictures and it is perfect! I probably should have just bought it from you in the first place, but I learned a lot in the process. Thanks so much, I really appreciate the work you do!

[l__armiste]

Amazing tutorial, worked like a charm! Thanks for creating such a sleek slider and making it accessible to everyone 🙏🏾

[bottablue]

Stunning!! you really helped me make a cool website for my father business!! We need more people like you who share their konwledge to self-taught people that want to learn!! you are really a master in this field!! Thank you!! Greetings from Uruguay!!

[combinio]

+1 for simplicity and the lack of external plugin. GREAT!

[wetcolorsgo]

A true work of art, this is the first video of yours I see. Your work is truly inspiring, thank you for sharing your knowledge. You got a new subscriber 😂

[lhwebstuff]

The amount of craftmanship put in this is insane. "I had to place an order" good work man

[highsite]

Finished it now. Looks absolutely stunning. Thank you 😊

[justingallant]

This is absolutely fantastic. Your explanation along the way is very helpful. I just purchased the template. I love it!

[joliegraphie]

Love this!
Question: Is it possible that the titel and text discription on the left only "fade in/out" as the tabs are switching instead of fading up?

[issaminkah]

Incredible. Very clean - and thanks for the walk-through.

[OriBengal]

Wow. How awesome! Both the layout, and tutorial.... and while the tutorial is epic, I was in a hurry- so your template is very reasonably priced. Thanks! Just what I needed. Bookmarked you, definitely coming back to see what else you've got :)

[rubenbad]

This one is amazing work! Thanks. I tried this to recreate with elementor Section & columns, works 90% good. I have a problem with Left Line Dots, cant get it correctly. The dots comes horizontallly. Can you please share a code or what adjusements i have to do? please help

[jamesngara]

Great video tutorial, thank you for sharing your knowledge! I have a couple of questions and would appreciate your help. Firstly, how can we further increase the image size on mobile? Secondly, is it possible to switch the containers so that on mobile, the images are displayed on top, followed by the header, copy, and button below them? I would be grateful for any insights you can offer on these issues. Looking forward to your response!

[estudiosunplugged]

I'm so lucky to find you. Your templates are the best, and with you I learn a lot. Blessings

[polo]

Thanks a lot for sharing. Absolutely stunning and works like a charm!

[FoxoticTV]

Do you think you could make a follow up that shows how to integrate dynamic post content for the title, paragraph, and cards? Think if I can link all this up with ACF it would be perfect

[anoukwollschlager]

There's already a problem when I insert all my images into the testimonial carousel. It doesn't show all five images in a row as it does in your video and after inserting the javascript I still don't see them. Did I miss something or are there some advanced settings I need to perform?

[gugafumero]

I made it with some personalization and it's looking awesome. Very nice tutorial and thanks for sharing!

[rpia]

True value for your subscribers. Continue to post such awesome design nuggets please.