Elementor 3D Image Carousel/Slider with Text (Coverflow Effect) | 3D Carousel WordPress Plugin
HTML-код
- Опубликовано: 1 окт 2024
- In this tutorial, I'll show you the Elementor 3D Image Carousel/Slider with Text with Coverflow Effect without additional 3D Carousel WordPress Plugin.
✅Get Elementor Pro:
makedreamwebsi...
✅Get Domain & Webhosting(SAVE 50%):
makedreamwebsi...
✅Get code snippet for Elementor 3D Image Carousel [ALSO WORK FOR FLEXBOX CONTAINER]:
makedreamwebsi...
✅Get creative templates on my Template Shop:
templatish.com
Today, I’ll show you how you can make a 3D carousel in your WordPress website by using Elementor. Here, you can change the slide by dragging or by clicking on the left and right arrows and also by clicking on the little dots. And you can see, the bottom text is also changing with the slide changes. And for this Elementor 3D slider with text, we don't need any additional 3D slider WordPress plugin.
First, we need to take a Media Carousel Widget and make its skin to Coverflow carousel. There is no option to add text with the Elementor Media Carousel. To add text, we create a new section and inside that also take inner section. In that inner section, we have added the text content.
Here, we make total 5 inner sections for our 5 slides. By using the custom CSS and JavaScript code, finally we can make the Elementor image carousel with text change.
Lastly, we also make it responsive for our tablet and mobile devices. On mobile, we keep one image per view and also make the text smaller.
So, that’s how you can make a 3D carousel in your Elementor website. If you enjoy this video, don't forget to like and subscribe.
Hi,
What an amazing share! I really love your videos, I have been learning a lot from them. I think this effect will be a great addition to a project I have been working on. I am trying to design a website for a photographer client, and this carousel will be an ideal design for it. I really appreciate you sharing this method, and I will be following the process to add this beautiful effect to my next project. Thanks a lot for sharing such an amazing video, it was a great watch!
Thank you! Cheers!
Hey I have followed all instructions and it seems to work in elementor editor but when i see the page live the text is not appearing.. Any solutions?
Do you use the new flexbox container?
@@MakeDreamWebsite yes.. i am building the website using flexbox container but yesterday i tried to do this using sections on different wordpress installation ... I created that section there in a template (Its working fine there) but when i exported and imported that template on my main website its working fine in a template but on main page where i want to use the text is changing automatically without interaction.. and Autoplay is off in media carousal... Do you know what might be the issue?
@@prathambhawsar1024 Hi, now you can follow the same process also with flexbox container. I have just updated the code snippet according to that and add it to my website. Can you please copy paste it again while doing it with flexbox container?
how do i change the active class in my carousel? Do you have a video explaining or would you customize as a freelancer?
Hello, thank you for the video. I've added the Javascript code at the end but my text doesn't show up. I've followed it exactly how you've done it. Could you give me some advice?
Hi, I'm trying to create a similar carousel, but I'm having trouble with the custom css style class selector .swiper-container {
padding-top: 5px;
padding-bottom: 50px;
} does not work. I've tried custom css in the elementor and on the apperance page, but I think the class may have changed to something else, maybe you know what name it has or how to fix the padding problem in another way.
Just type .swiper
Hi, now you can follow the same process also with flexbox container. I have just updated the code snippet according to that and add it to my website. Can you please copy paste it again while doing it with flexbox container?
Hello, I like your videos and products very much. I wish you continued success. I did the function in this video, but I want to do it more than one on the same page. but the slider at the bottom does not work while the top one works. how can I fix this.
i struggle with the same issue, i wish to use multiple but only one will work and controll al the others, i tried changing the cssclasses names and the names in the HTML but so far no succes...
Okay, I'll try to change the code snippet so it'll support multiple sliders in the same page
@@MakeDreamWebsite that would be amazing, thanks in advance, also your work is amazing, this Chanel is a real life safer thanks a lot for your work ;D
I have tried many times to make it.
In my version of elementor, inner section widjet is missing
Hi, now you can follow the same process also with flexbox container. I have just updated the code snippet according to that and add it to my website. Can you please copy paste it again while doing it with flexbox container?
You are An Amazing Rare Gem. Thank You.
You're very welcome
this need elementer pro ? my media carousel is locked .
Yes, this carousel is available in Elementor Pro...
sir, why in my website, the text is not show
and if the text is show, text is not changing if i slides
i’ve been 5x times replay your video and precisely follow up your step by step
Thanks, but sir if you went to add button, not working, he made or active only last button, sir how to solve?
Please help me, I'm a beginner at this, the video doesn't turn out exactly as it is, I think I've followed all the steps, when I put a slider in the carousel the image is lowered, covering the text that should accompany the carousel. Can you help me please?
Greetings, I followed the tutorial step by step but it doesn't work for me, the only thing different is that I am using the container to put the texts.
Can you help me please?
Thank you so much.
Yes, for container it may not work properly. I'll update the code snippet so that it'll be compatible with container too.
@@MakeDreamWebsite Hey! Did you updated the code? I need this for a project urgently
@@prathambhawsar1024 Hi brother, did you find any solutions for that? The code is still not updated and, as did you, i really need that code cause that caroussel would be so perfect for my project
@@lecrafteur99videos Hi, now you can follow the same process also with flexbox container. I have just updated the code snippet according to that and add it to my website. Can you please copy paste it again while doing it with flexbox container?
The 'Inner Section' widget has been phased out in Elementor Pro, and the code doesn't work with the new 'Containers' widget. Unfortunately, that makes this tutorial useless:((
Okay, I’ll update the code snippet soon so if you also use container instead of section or inner section then it will also work for that.
@@MakeDreamWebsite Did you find the new code? I need it I have the same issue
Did you get any solutions?
Hi, now you can follow the same process also with flexbox container. I have just updated the code snippet according to that and add it to my website. Can you please copy paste it again while doing it with flexbox container?
@@MakeDreamWebsite Awesome! Thank you so much 🙏
Hello Sir! You are Amazing. Sir make a video to add popup template. For example I want to give Restaurant Menu in PopUp Box rather than page. Can you help me with that?
Hi, amazing video
but in my version of elementor the media carousel is replaced by image carousel which didnt have the coverflow skin, does it has to be elementor pro to get this effects? Thank you!
The text is not appearing
Hi, now you can follow the same process also with flexbox container. I have just updated the code snippet according to that and add it to my website. Can you please copy paste it again while doing it with flexbox container?
You've done good so far but the code wasn't working cuz of the new flexbox so i edited the code and is working now. i can help with the code text on my gmail mentioned on my channel
@SaranAli-j9x thanks for the template it was worth the money
@@Imperialsolutions-p7m Hi, now you can follow the same process also with flexbox container. I have just updated the code snippet according to that and add it to my website. Can you please copy paste it again while doing it with flexbox container?
Thank you so much for sharing your content, it has helped me a lot. I only have a problem in the mobile responsive, the images don't appear, everything works but the carousel is empty, do you know what could I do?
Hi, now you can follow the same process also with flexbox container. I have just updated the code snippet according to that and add it to my website. Can you please copy paste it again while doing it with flexbox container?
hi there, any ideas how to remove the shadowing in css ?
Very Nice. 3d Coverflow Team Slider for WordPress
You're welcome!
Thank you very much for responding, and can you let me know when you modify the code and also if you can upload it to also buy the template. thank you so much
Hi, now you can follow the same process also with flexbox container. I have just updated the code snippet according to that and add it to my website. Can you please copy paste it again while doing it with flexbox container?
Hi, thank you for the gran video!
I have a question, because when i preview the carousel i can see it just fine, but when i open it in another computer the images do not show. Do you happen to know what could be the problem?
Thank you in advance
I tried to follow this amazing tutorial briefly, step by step made it 2 times to make sure everything was correct. Well unfortunately either its outdated or i am doing something wrong. As the text below the images is just changing itself and not on use input while changing the pictures. I have done step by step literally. Is there something wrong or an update came that ruined it? I would love it to work for me, but after doing it twice - still doesnt work the text just changes itself after few seconds.
this might be the problem/ and solution, press on your media carousel, go to additional options, turn off auto play, hope this works.
Getting Same issue... Did you find out the solution?
How can I change carrousel pagination to small image, make this small images look like the large image in the carousel, and have it appear below the text?
Use a media carousel widget and set the Skin to Slideshow
Hello!
I don't understand why the code is not working. My question is: how does the script determine which text block to display on the screen? They differ only in ID, right?
May be you do some mistake. The text block will show serial-wise, means the first one is for the first slide, 2nd one is for the 2nd slide and so on...
@@MakeDreamWebsite In the new version of Elementor, there is no 'data-swiper-slide-index' attribute in the carousel. And your code doesn't work
Okay, I'll have a look
@@MakeDreamWebsite I understand the issue. Different modes of this slider display different content in the containers. Thank you.
@@konion Can you share the updated code?
Doesnt work with buttons.
Sir i am getting 403 error when i try to update. This happens after i add the html code above the slider. Any idea what might be causing it, or how i can fix it?
Can you email me your page link so I can find out the issue...
Using that much code in WordPress isn't preferable, it effect massively when it comes to speed up your website
Actually under the hood, inside any of the WordPress website, there are a bunch of code. So, when you load a normal WordPress page (without even any extra custom code of Elementor) already a bunch of code are running behind which you can't see. So, adding this tiny pieces of code isn't a big deal for the performance. It's like adding a cup of water in the ocean.
Thank you for this tutorial great working Done i have make it in my client website he like it
My pleasure! Happy to help...
Sir one more thing, 3D Media Carousal is present in Elementor PRO. What if we don't have PRO version?
Yes! I forget to mention that. To create this kind of 3D carousel you have to have Elementor Pro. But, you can also create normal Image Carousel in Elementor Free version.
Hello sir, the code for the writing is not working anymore with the new container boxes. Can you fix it please? I really need it for my website I appreciate all your work, you are the best on youtube for doing that. Kind regards.
Yes, I'll update the code snippet so it will work with the new flexbox version as well.
@@MakeDreamWebsite Thanks sir, i'm looking forward to this solution. Keep up your good work, i really appreciate what you do!
@@lecrafteur99videos i have the solution
@@SaranAli-j9x Can you share please?
@@lecrafteur99videos i'll upload a video of it and also the code of it on my channel tomorrow so kindly wait till then thanks
Your channel is gold to webdesign dude. thanks a lot for your work! Appreciate :)
You're very welcome!
Sir, thank you for this tutorial and the code you gave us. Everything is working properly. Do you know how to make the central image, the image in focus, a little bigger.
You need to do it with custom CSS, not possible with default Elementor options.
hello bro
there is a problem if the slider section is given another section above it then the slider-text section cannot be synchronized with the slider section. Guess why? is there any solution?
thanks
I got it. I need to update the code snippet
I have the same issue. Is the code snippet updated?
Many thanks for this amazing video, it worked great when added 3 images and 3 text but when I tried adding 4 images and 4 text , its only reading 3 text and omitting the last text, what would be the issue?
It's will work only for 3 slides
Hi, awesome tutorial, I only have one question: In my version of Elementor, the custom positioning tab is not available, it's there a special mode that is needed to unblock it?. Thank you.
You can find it somewhere inside the Advanced tab. It may changed it's location because of Elementor updates...
@@MakeDreamWebsite Thank you for the answer, I confirmed it has changed position in the later version, and now it's not a separate flap anymore, it's in Layout >Width >Custom.
This effect can be done with the Testimonial Carousel widget, which does not have a coverflow option in the skin function?
No, it can't be done in that way...
@@MakeDreamWebsite 🤕Thanks for your answer. Your work is amazing!
amazing video once again! does it still work on the flex container?
Hi, now you can follow the same process also with flexbox container. I have just updated the code snippet according to that and add it to my website. Can you please copy paste it again while doing it with flexbox container?
It feels good to watch the video. But I can't solve some problems.
I used 10 pictures and 10 texts. But the text does not change as soon as you click on the arrow. It's just changing over time.
this problem solved. Thanks a lot.
@@samsurrahmansaiel9103 😇
@samsur Rahman Saiel: Even I have same issue, could you please tell how did you fix this?
@@sindhujayakumar9163 Sorry for late response.
I didn't use anything extra. You better watch the video. Do as shown in the video.
The reason I had problems was that I didn't work like the video at first.
Then if it doesn't work properly. tell me I will help you directly.
Thanks
Amazing work! Did you also develop the same code for the new updates of Elementor that use 'containers' instead of 'columns'/sections? Please let me know about it. Thanks a lot
No, I haven't made it yet!
@@MakeDreamWebsite Do you have the code now? Would love to use it for my website!
@@mirconieberg5680 you can tweak the code to work for containers. On the container advanced tab, add a css class, let's say, "text-section". Then change the code where it says ".elementor-inner-section" to ".text-section", remember to do it to for the JS code. That worked perfectly for me
How to give specific text to specific image
Here you can give different text for different images. You can see, after changing the slides the text is also changing to that image specific text. From the navigator view, you can see 5 different inner sections for 5 different images.
Hello my friend ,, its amazing ,, but it doesn't work for me ,, after i paste the html code nothing happens with the text.. i only have 3 images on the carrousel
Do you work on the new flexbox container?
@@MakeDreamWebsite its deactivated.. i used inner section just like in your video,, it all works well until i add the html to the slider ,, the text doesnt change
i even tried your other vertical card carousel and nothing happens ,i get the same issue
@@gilleslionnetvalenti4286 You can email me your page link
@@MakeDreamWebsite I have the same problem... I think everything is how it should be, but just don't work after adding HTML
Hello, thank you very much for your amazing video, i tried it and it worked , but when i duplicated it, the words are not showing, i also tried doing it from beging and the words still are mot showing.
I got it. I'll modify the code to support it for multiple sliders. I'll let you know when it's done.
Thank you very much, that would be amazing !!
@@MakeDreamWebsite Hello any update of the code so far would be a great help
@@MakeDreamWebsite any updates on this?
i woud love to see an update on this...
Почему не открываеться Ваш сайт?
Можете попробовать еще раз?
Gracias por el tutorial! 👏👏👏❤️❤️❤️
De nada!