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:
https://makedreamwebsite.com/elementor-pro
✅Get code snippet for Advanced Slider:
https://makedreamwebsite.com/elementor-advanced-slider-with-card-carousel/
✅Get this READY-MADE template on TEMPLATISH:
https://templatish.com/template/elementor-advanced-slider-with-card-carousel
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.
source
Another stunning masterpiece, thank you for sharing your knowledge, i happy to learn from the best!
i cant find container box
excelente
Como entro em contato com o suporte da templatish.
I need assistance with my template, someone help me ? I buy in templatish
great talent
Thanks for your tutorial. I just want you to know that the background transition effect when opened in Mozilla Firefox in not as smooth as in Chrome. I don't know it's because the CSS code or from Elementor, tough.
I bought thinking it's a html-css-js that I can use in any website, can you help me export it ? , I can give you my receipt.
Everythings works fine until I upgrade to the new Elementor and boom, all the code at screen and nothing works anymore. Any suggest?
Can you make a tutorial on how you created the javascript and css? that's where the real gem is… This is great but can't learn from copying pasting this especially for custom projects
Hey, first of all thanks for your content!
I bought this slider and used it for my website, but when using it my sticky Header doesn't work anymore. I am using the Astra Theme and the weird thing is, when i'm on the Page in the Elementor Builder it works, but when i show the preview and view the page, the sticky Header doesn't work .. Do you know what can cause the Problem?
Is there a way to make the slider cards wider? If so how can I do it? Thank you!
Hello . I need the same thing, but I don't want it to be in the form of a slider and I want it to be a page of small photos, for example 5 x 5. How should I do it?
Is it legal to download your template without having elemtor pro?
Wow! Just WOW! Thats amazing!
hi does this work i divi theme ? ore do you know how too do it in divi =)
Hi, I have a question, the slider comes out of my screen and there is a lot of mess. Is there a way that what comes out of the screen will not be seen?
Horrible English 😢
there are problems with your code snippet you have changed the code. it is not working as it is working on your turn. you do this to get more sales of your template. so shameful…. i wasted two days to make it from scratch but something wrong happen everytime and i try it three times to check that whether there is any problem on my turn but then i observed that you are the sales pitch. really disappointed
Hi, that look incredible but what kind of theme do you use ? Because, when I build it, I stiil get the Header and the Footer… At the end it never looks as clean as you… How can I remove the header and the footer ? Thanks for your answer
Thank you for sharing your knowledge
You are really my hero! Made some really nice designs with your content! <3
Not sure if you're seeing our comments below but looks like this stopped working with one of the recent Elementor Updates. the slider isn't working with the script
Can we add video also?
at 12:08 buttons are broken for me, I guess you skipped a scene there to fix that but we have no solution for it. What to do?????
is it possible to make more slides? then the ones you made?
HELLO Thanks a lot but i get a problem in testimonial carousel i upload
5 photo but wheni select slide per view all image gone xd help me please
Left right button is not working
Thank you for your quick reply. I'll take care of it
This slider is simply beautiful and fits so well on my website. At first I tried it myself up to a certain point and then I didn't know what to do. Then I bought the template, replaced images and text, which looks great, but unfortunately the buttons are not responsive. They are distorted on tablet and mobile. What could be wrong. My Elementor Pro is up to date. Do you have any advice for me?
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!!
hello what about do same think without elementro pro ? it that possible please
Nice tutorial
Hola, tienen algun foro donde se hable de esto?
Hello, I've seen this tutorial they do in Figma https://www.youtube.com/watch?v=xgk5N4rCJIw&t=9s , but it's complex to bring it to Elementor. Can you make a tutorial on how to achieve this 100% with Elementor?
Hello, thank you very much, the tutorial was excellent. I followed all the steps, but I have a problem. When I move the slider, the large background images in the main container do not follow the order of the images in the testimonial slider. How can I solve this?