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!
Please do an update video how to fix your template for those that have purchased it or fix your code and send out the updated json file to everyone who purchased please. To everyone considering buying the code is not working for most people from what I have read. It will likely be 5 dollar loss for you as it was me. Not a big deal but would be cool if he would fix it because the paid verison "almost" works but doesn't full, in its current state its very buggy (overlapped words, buttons not in the right place, background images overlapping at the top, etc. Not ready to sold in its current state for sure. @MakeDreamWebsite can you address this please?
dosnt work man!wasting my time
I bought the template, but it doesn't work, it doesn't show, I can import it but nothing changes after it loads the template..
You are amazing .. Thanks man
hi…bro…how to get template?……i'm from india …update mail..thank you…
why it doesnt work for me? i copied from your css and html but the heading, paragraph, and button wasnt slide?
i noticed you mentioned you need elementor pro if you buy the package, is it the same case if you follow the instructions in the video step by step?
I followed this tutorial step by step and I have one small issue: It kind of doubles down on the animation and feels kinda rusty. Anyone who has an idea on how I can solve this?
I have purchased but it's not working. Does it requires Elementor Pro Version?
Buttons not working, did everything exactly like the tutorial. I see more people having an issue with this.
Is it possible without container
I have two small issues. when I click different images on my mobile the size of the image goes big for one image and small for another image. Also, when I click the image it shows the different picture. Please help.
CODE DOESNT WORK. TRIED DOWNLOADING TEMPLATE. PAID AND GOT NOTHING. YOU WASTED MY TIME AND MY MONEY. NO WAY TO CONTACT THIS GUY. TOTAL BULLSHIT.
Hey there, thank you for this, it's amazing. I bought the code off you to save time (bargain!) and I've made a couple of versions. I've got a small issue though, the left column with the header and text does a sort of double somersault when the page loads and i can't figure out how to fix it. This is a site with Elementor containers as opposed to sections. But it looks like it should be ok. If I preview the template itself, it doesn't do the jump. I'd be so grateful for some help on this.
Hello! I have a doubt. I followed exactly as you taught, but when I put the code "CSS Code Snippet for Heading Container" it didn't work. Instead, the words were all together (the title, text and button), they were expressed and not the same as the video. Can you help me?
Great Video! But the arrow buttons aren’t working for me. I put the css class but if I click, it just jumps to the top of my page… anyone knows why?
Great work but i am getting issues with the button. as I am clicking on it. it is taking me up of the page instead of scrolling.. can you please help me
Truly spectacular! Thanks for posting this tutorial.
I created and recreated everything several times but it doesn't work 🙁 I'm sure I carried out all the steps correctly, I see everything perfectly, but the slider only works on the testimonial carousel, the background doesn't change, and neither does the text.
please, can you help me?
Thank you for creating amazing content! However, my mobile view doesn't work (other devices work perfectly): It doesn't show like yours – top to bottom, mine shows like a 'side-by-side' view. I would appreciate if you could guide me through your suggestions.
My arrow is not working i am working on the section not on the container please help ASAP ‼️
I paid and downloaded your theme but that doesn't work???
hey ive downloaded the template i jst cant get the overflow to hide properly when i scroll
Love your work! Do i need Elementor Pro if i buy your templates from your webpage? In the description it says so, but in the video you said that buying is an option if you dont have Elementor Pro.
Thanks!