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?
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!
Thanks for the tutorial, it works. II saw in the comment section a lot of errors on the left &; right buttons, and this also happened to me. The solution is quite easy, just activate the arrow on the testimonial carousel and pagination to none. Hope that helps.
Yes, you're right! If you disable the default arrow and pagination.. then it would not work properly! I need to mention that with more importance.. my bad!
Hi! Thank you for sharing this, this is amazing! However, when I was trying to add an audio player button to the section, each time I click playing the whole page will automatically go back to top - do you have any ideas on how to solve this?
Hey Guys ! I purchased the download and imported to wordpress ! i already have a template set up through elementor and I just wanted to add this Carousel to a section but it did not work - Any advice please ?
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 😂
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!!
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
Not only is this a stunningly beautiful design. The author also is really helpful. I had a problem on safari and he helped me fix it. Absolute recommendation!! Thanks a lot.
Hello i hope you are fine, thanks for this amazing animation ! i have a problem with the javascript code. It appeared in its entirety on my site, as if it did not want to be activated. And then everything else doesn't show up. It is well positioned just above the carousel though, do you know where this could come from? Best regards
yes, something wrong in "CSS code snippet for Top Most Parent Container" code, i've tried it twice, the button and testimonial carousel gone, please need a guide. Btw it's still an awesome tutorial, thanks anyway !!
Hi there, I wanted to thank you for this video and the resources you provided us. I was trying to build this masterpiece from scratch, but ran into a bunch of bugs. I ended up just purchasing it, and it's working great. Again, thank you so much! Much appreciation.
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
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!
For change the order of containers, you can change the 'direction' of the primary container only for mobile. Edit container > Layout > Items > Diretcion - column reversed (the last arrow on top)
Hey, I had the same problem until I messed a little bit around. By turning on the "Arrows" in the "additionel settings" within the testimonial carousel I got the buttons to work.
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?
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?
This is great, I did it step by step without complications I saw the video 3 times pra chekear that everything was correct, I realized something that you do not say and is for the letters to work the main container must have allied elements because if not the letters become crazy, if you said the truth I did not understand sorry, but I realized when you made the camera cut and went to this container, I did that and there was perfect. Although in the mobile I had to change the measures because the container was not centered. You are a master a thousand thanks
How did you make all headings, texts and buttons to not overlap in your working view? On my page it also looks broken on viewers mode for several seconds, until it starts to look right. Can you help me please?
You can make the overflow hidden for that container. If then it still have that overflow problem, you don't have to worry too much about it as your actual live page is okay...
Nice Work! Thank You very much! Is it possible to display round pictures? if i set the radius in css of the carousel to 100% the inactive pictures looks like a egg ;) thanksss
I‘ve edit the css in the testimonial carousel. But i can‘t change the width. At the inactive picture looks like a capsule 💊 how can i get it completly round ⚪️ ?
@@marcelrieth you can change the width of the slides by adjusting the width of the whole slider and slides per view option. Both of these options, you can find in the testimonial carousel widget.
I'm really thank u for this project, i was searching fo a good carousel, and I have no words for how good this project is. Congrats, and keep doing this way, thank u friend! S2
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 :)
Thank you for this tutorial. I followed your step and it worked. It did not work during the process as it did for you, but once it was finished, it worked all nicely :)
@@MakeDreamWebsite Is there any way how to use this slider on a homepage with other Loop items on the page without being affected by the CSS etc? :) If I put one to the page, the image background etc is on that too. Thank you
@@MakeDreamWebsite I mean I used it for a homepage, but I want to add another loop item (default design and fuction) on that page, but if I do, the others loop items are affected from all the CSS from your loop item :)
Thanks for the tutorial, it's working perfectly!!.. but is there a way to fix the slider so it will not auto slide to left when the cards are clicked? As i need to include buttons for each card.
This is basically the default behaviour of the testimonial carousel widget. And there is no way to prevent this. If you have any link for individual slides, you can add them with the left side buttons...
This is really amazing but I'm running in to a couple of issues. I add the CSS and HTML into the container as well as the code but the slider still does not show in the build. It shows when I update and press preview. For some reason I cannot change the size of the text that is overlaid and also, the buttons do not work. I have applied as-slider-left/right as classes to each respective button. Any help would be appreciated.
From the edit page you can't see everything. Here you need to use the navigator panel for editing. But, on the actual page everything should be fine...
@@MakeDreamWebsite thanks for the reply, do you have any idea why the left and right buttons aren't working? I've followed along perfectly but when I click them nothing happens.
@@chawkichoki921 Yahh I got it fixed. You need to try reuploading a picture for the background and configure the background settings from scratch. This worked for me
Thank you for sharing this, an amazing tutorial as always. I only have one issue though, the background slider doesn't change at all. I don't know what could be wrong, every other thing works perfectly, only this background doesn't change.
Regenerating CSS files helps with the partial functionality issues for once and all, or clearing browser cache each time before you preview gives real-time results.
Hello! Very useful content thank you so much, I would like to ask is there a possibility in the CSS code written for the side line to change the placeholder of the dots from 1-2-3-4-5 to years? like 1990,1991,1992..etc
Hiii, thank you for the valuable video, its perfectly working when the text on left side and card on right, but can you please tell me how to add cards on right and text on left? when I adding like this all the cards getting overlay on text. Really appreciate if you can mention the chaning point to fix this!
Troubleshooting Tip: Slider Images Not Appearing If you’re encountering an issue where slider images are not displaying, follow these steps to resolve the problem: Check CSS Class Names: Ensure that the main container for your slider has the correct class name. It should be set as as-slider. Verify that the testimonial carousel has the class name as-side-slider. Refresh or Publish: After confirming the class names, refresh your page or publish the changes. This often resolves display issues by updating the changes. By following these steps, you should be able to resolve any issues with images not appearing in your slider. If the problem persists, double-check for any additional CSS or JavaScript conflicts that might be affecting the display.
Hi. After adding the css and JavaScript followed by the classes as-slider and as-slide-slider , the slider is fading out without wanting to show up.. ( 6:44 ). any advice please? thank you
From the custom css I've made its opacity 0 initially, and make the fade in animation by JavaScript when the page is loaded. It looks okay if you see it from the actual live page. If you want to edit the carousel content, you can also do it from the navigator view.
@MakeDreamWebsite Wow ! Silly me, I've haven't check the code at all, I've just followed the tutorial like a noob. Thank you very much Raiyan. I swear! When I'll get paid by my customer I will share a cut with you. As well, your instant reply is top service. You're blessed brother. 🤗
Thank you so much for sharing the tricks! It's absolutely useful and smooth to function on website. Keep it up and we wish to see more contents like this!
Thanks for posting this video! i've successfully completed the page following your instruction. I have 1 question about this video. At 14:15 you mentioned that you are able to scroll it down and mine is the same. I've followed the rest of the steps you've said but the problem is still remaining the same. Do you know how could I solve this issue? thanks
This is really nice. Thank you so much for sharing. I made this on my localhost and it worked perfectly. But when i pushed my website live, alot of things were breaking. Any idea of how i can fix this?
Can you please remove this section on the live version for test purposes. If the issue persists, then it might related to the server or hosting I think.
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?
Great video but I am facing an issue, in tab and mobile view the headings on left side 2 headings are coming together like when I change the image new heading comes up and the previous goes up a little but it stays . How to fix that
hey, thanks for the tutorial, i'm looking for a way to make a button that slide to a specific item , is there a function of slider that can slide an item by index?
Hello! Thanks for yout amazing video! I just did it but I would like to make click on image also... Is its possible? I can't find the way to do it by myself... Thanks!
Thank you very much!!! I am not a programmer, The programmer who worked in my company used your slider and my boss has asked me to make the image also functional. At least now I know it is not possible!!! Thank you very much!!! @MakeDreamWebsite
H, I believe I've followed this accurately 3 times now but my images are all stretched and not maintaining correct aspect ratio within the boxes. Please help, I've spent a couple of days trying to find thats wrong.
when you do the copy container at minute 4:00 my container doesn't go below the other, it goes to the right side and i can't figure out why, i keep repeating the tutorial
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.
Hey! Love this. I just purchased the .json and I can't figure out how to add a second button to one of the slides. Does anyone have a solution? thanks!
friend, thank you very much for your video. I have implemented it on my website and it has been luxurious. I have a question for you, how do I get clicking on the images to take me to a specific URL? That is, eliminate the function of changing the texts on the left when clicking on the images and only taking me to a specific URL, and to change the texts on the left, only leave the arrows.
help i followed all the instruction but im stucked at 7:05, i have pasted the javascript on the html but the result is not the same as yours, i still can't see the sliders
the right column with slider is working but i don't have a container widget hence i believe the code for the left column is not working which should move the headings simulataneously with the right column., can you help?
Hi, amazing video and wonderful features! I followed very carefully and re-watched multiple times, and managed to make it all happen! ...Instead of the background changing part. I found out that the images I selected for the background slideshow was somehow failing(having red boxes and darkened images from the 2nd one. Only the first image on the gallery is active, and non of the images are over 1920px) So I went on and bought your template, but strangely the images from your's give me same red-boxed error. Idk what caused this and I really want to figure this out! Best regards...!
Thanks a lot for the amazing slider and carousel. I was wondering if it's possible to make the class = elementor-widget-container scrollable. In order to always have the same amount of text and the overflow then hides the rest.
Hi, I'm doing everything I can to make this responsive because the height on a tablet or mobile device goes "flat". Unfortunately, I don't have flexbox containers and I can't turn it on. How can I alter the height/size and resolve this problem in the code? I tried changing the carousel's media's height in the CSS, but this did not work. I tried adjusting the height from settings. Not working. Thank you very much for any help!
@@MakeDreamWebsite @MakeDreamWebsite Hi.. i see you are replying to selective comments only. But people have been asking that the buttons don't work in new elementor even after switching the pagination and arrows
@@campingmiles I test it out on the latest Elementor version and it's working properly. The issue happens because most of them don't follow the steps properly or they just asking without completing all the steps and also sometimes it can be happened due to some conflicts...
Thank you so much for the video! It's not only super easy to follow but also your design skills are impressive! Anyway, I hope you will see this and be able to help me, but on the newest version of Elementor, everything works just like in the video except when I get to setting the "Slides per view" to "3" on the Carousel at minute mark 5:55. My slides don't display right next to each other like it does for you, and when I continue on, I'm only seeing one image. Could you think of why that is?
sorry, i posted another comment but it might've gotten deleted because i incliuded a link. In the editor I see it like I described above but on the live page, the images don't even show. Do you know why that would be? @@MakeDreamWebsite
Yes, if you you include sometimes it might be auto removed! You can remove the very first line of the html widget. Hopefully, that will work!@@vassil.stoimenov
Yes, you can in the button link option instead of put a plain link, click on the dynamic tag option and from the select lighbox, for that lightbox you can choose your video...
excelente Video, tengo una consulta en la version de elementor que tengo no me aparece el widget container, de ahí empieza el problema como puedo hacer. gracias, excelente tarde.
Hi . I have a problem with Changing the heading and the paragraph and also the buttons . Thay are all in the same place and dont hide when i change the slide . Also i checked the video three times , but my problem was not solved . Can you please help me , 😢😢😢
excellent tutorial and incredible design... here there is an error in the button, in the preview it goes back to the top of the screen instead of rotating the cards, would you know why?
Great, thanks for this video. I have a question: I design my slider image myself. I prefer a full width slider. What is the ideal size (hight and width) I should make the full width slider image?
Hello, firts of all, would like to thank you for this video, really appreciate that one ! I have a problem with the as-slider arrows, when i click on it after defining their class, it makes me go back on top of the page. Any idea of what could be the problem ? Thank you very much
Hi! Great tutorial! I have a doubt, don't know if anyone can anwser it. I'm trying to keep proportions on the image so it's seen the full image and it resize. Do you know how I can change this to the image of the testimonial? Also there is this akward shadow that I don't want, any clue?
Another stunning masterpiece, thank you for sharing your knowledge, i happy to learn from the best!
My pleasure!
@Noufal Scorpius 🔧 Testomonial Carousel is available only on Elementor Pro. You can't make it with free version...
@Noufal Scorpius 🦂 My slider button not moving where i can put CSS?
@@MakeDreamWebsite when i enter javascript i am unable to see the pictures i only see black screen
@@newsmartgadgets2278 I've just updated the code snippet on my website to fix this issue. Can you please copy paste it again from there?
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?
i am having the same issue right now
how can fix it.... me too =(((
me too I dont see it
Seems like all of us have that problem then u.u
Can any of if you email me so I can solve the issue globally…
The amount of craftmanship put in this is insane. "I had to place an order" good work man
Thank you!
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!
Thanks for your awesome feedback
Did it work successfully? When I post pictures, the large background does not change or move!
@@chawkichoki921 it did work for me
Flawless! A single suggestion that worked for me was to change the mobile padding (16:43) from 30 to 10 because it wasn’t fitting properly.
+1 for simplicity and the lack of external plugin. GREAT!
Glad you like it!
Thanks for the tutorial, it works. II saw in the comment section a lot of errors on the left &; right buttons, and this also happened to me.
The solution is quite easy, just activate the arrow on the testimonial carousel and pagination to none.
Hope that helps.
Yes, you're right! If you disable the default arrow and pagination.. then it would not work properly! I need to mention that with more importance.. my bad!
thats not working for me :c
@@x1linkmegax332 didn't work for me either
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?
having same issue..
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?????
Amazing tutorial, worked like a charm! Thanks for creating such a sleek slider and making it accessible to everyone 🙏🏾
You're very welcome!
we must use elementer pro or what ???
Did it work successfully? When I post pictures, the large background does not change or move!
@@chawkichoki921 Its buggy. The code needs fixing/ updating. He should take it down
In 2 words great Tutorial. Thank you for giving your highly valuable knowledge to all of us!!
Glad you enjoyed it!
this tutorial can use for elementor free version ? or any suggestion for testimonial carousel
Up!
Hi! Thank you for sharing this, this is amazing! However, when I was trying to add an audio player button to the section, each time I click playing the whole page will automatically go back to top - do you have any ideas on how to solve this?
Hey Guys ! I purchased the download and imported to wordpress ! i already have a template set up through elementor and I just wanted to add this Carousel to a section but it did not work - Any advice please ?
You can email me...
@@MakeDreamWebsite Hi guys where abouts is your email adress listed ? i cant seem to find it - Many thanks.
@Make Dream Website Hi Guys ! i cant find your email adress listed anywhere as the template will not input into wordpress.
@@rossmirams4287 it's contact@makedreamwebsite.com
@@MakeDreamWebsite Email Just sent ! thanks for your help.
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 😂
Thanks for the great comment❤️
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!!
Thank you so much!
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
i see that the post has been a while, but i have the same issues... i'm wondering if you/ anyone has found the solution to this yet?
Not only is this a stunningly beautiful design. The author also is really helpful. I had a problem on safari and he helped me fix it. Absolute recommendation!! Thanks a lot.
Thank you! Glad you like it!
Couldnt get the html code snippet to work? Anyone else having the same problem?
I'm so lucky to find you. Your templates are the best, and with you I learn a lot. Blessings
Thank you so much. Glad you like them!
Hello i hope you are fine, thanks for this amazing animation !
i have a problem with the javascript code.
It appeared in its entirety on my site, as if it did not want to be activated.
And then everything else doesn't show up. It is well positioned just above the carousel though, do you know where this could come from?
Best regards
UPPPPP
having same issue!!
yes, something wrong in "CSS code snippet for Top Most Parent Container" code, i've tried it twice, the button and testimonial carousel gone, please need a guide.
Btw it's still an awesome tutorial, thanks anyway !!
Does this (Elementor) work without Wordpress?
No, Elementor only works inside WordPress...
Hi there, I wanted to thank you for this video and the resources you provided us. I was trying to build this masterpiece from scratch, but ran into a bunch of bugs. I ended up just purchasing it, and it's working great. Again, thank you so much! Much appreciation.
Maybe you do something wrong while following the video. The video and the template both are same. BTW, Thank you for your amazing feedback.
Hey we must use here elementor pro or we can do it in elemntor free ??
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
You can't make it dynamic by following this way. I need to think of another procedure to do that...
@@MakeDreamWebsite Would love to see this!
Hidden gen channel for elementor dev
Thanks Donny! for such a great appreciation!
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!
For change the order of containers, you can change the 'direction' of the primary container only for mobile. Edit container > Layout > Items > Diretcion - column reversed (the last arrow on top)
Such a great tutorial - however the buttons don't work - I added the CSS so I am not sure how to make it work. Do you have any advise?
Hey, I had the same problem until I messed a little bit around. By turning on the "Arrows" in the "additionel settings" within the testimonial carousel I got the buttons to work.
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?
Amazing! But where is the code ( min:6:45 ) to be found?
On my website, you can see all the code snippets as different segments…
@@MakeDreamWebsite Thanks for aswering! :)
Well.. your website is hugh! :D Is it too much to ask to post a link to the specific page? :x
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?
You can email me... I'll have a look
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?
Hey we must use elementor pro or what ???
This is great, I did it step by step without complications I saw the video 3 times pra chekear that everything was correct, I realized something that you do not say and is for the letters to work the main container must have allied elements because if not the letters become crazy, if you said the truth I did not understand sorry, but I realized when you made the camera cut and went to this container, I did that and there was perfect. Although in the mobile I had to change the measures because the container was not centered. You are a master a thousand thanks
This is absolutely fantastic. Your explanation along the way is very helpful. I just purchased the template. I love it!
Awesome! Thank you!
@@MakeDreamWebsite The mobile view is not working quite right. Is there something more that needs to be done after implementing?
The icons are not displaying like the example at the beginning of the video.
@@justingallant1988 No, nothing need to be done additionally. You can email me your page link to me. I'll find out the reason.
Can i purchase them with paypal?
please can you advise how would i keep the original dots and arrows ?
On the css of the Testimonial carousel with you can see I've make it invisible by display: none; you need to just remove that CSS line...
the class on the buttons doesn't work!
You need to turn on dots and arrow option of the testimonial slider. Otherwise the arrow button won’t work.
@@MakeDreamWebsite Still wouldn't work for me, too. 😣
@@MakeDreamWebsite How to turn it on?
How did you make all headings, texts and buttons to not overlap in your working view? On my page it also looks broken on viewers mode for several seconds, until it starts to look right. Can you help me please?
You can make the overflow hidden for that container. If then it still have that overflow problem, you don't have to worry too much about it as your actual live page is okay...
@@MakeDreamWebsite that helped, thank you!
Nice Work! Thank You very much! Is it possible to display round pictures? if i set the radius in css of the carousel to 100% the inactive pictures looks like a egg ;) thanksss
Instead of 100% you can use 500px. So, it should look like a capsule💊 rather than an 🥚
You can also adjust the --height and --active-height (from the custom css of the testimonial carousel) to make it a round circle...
Tanks for your answer. I will check it later ✌️
I‘ve edit the css in the testimonial carousel. But i can‘t change the width. At the inactive picture looks like a capsule 💊 how can i get it completly round ⚪️ ?
@@marcelrieth you can change the width of the slides by adjusting the width of the whole slider and slides per view option. Both of these options, you can find in the testimonial carousel widget.
I'm really thank u for this project, i was searching fo a good carousel, and I have no words for how good this project is. Congrats, and keep doing this way, thank u friend! S2
You’re welcome!
Awesome tutorial as usual, I'm having an issue importing the json file with an error and i can't upload it. any ways to fix it? Thanks
I am having an issue, too. It gets stuck on "importing"
You both can email me
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 :)
Thank you so much for your appreciation!
Thank you very much for your very comprehensive tutorial, I would like if possible that the image also scrolls alone, is this possible?
Yes, for that you need to enable autoplay option of the testimonial widget.
Thank you for this tutorial. I followed your step and it worked. It did not work during the process as it did for you, but once it was finished, it worked all nicely :)
Great to hear! Yes, that can be happened due to Elementor update I think.
@@MakeDreamWebsite Is there any way how to use this slider on a homepage with other Loop items on the page without being affected by the CSS etc? :) If I put one to the page, the image background etc is on that too. Thank you
Yes, you can use it on any other page without any issue…
@@MakeDreamWebsite I mean I used it for a homepage, but I want to add another loop item (default design and fuction) on that page, but if I do, the others loop items are affected from all the CSS from your loop item :)
@@MakeDreamWebsite Well, whole page background is affected to be honest :)
Thanks for the tutorial, it's working perfectly!!.. but is there a way to fix the slider so it will not auto slide to left when the cards are clicked? As i need to include buttons for each card.
This is basically the default behaviour of the testimonial carousel widget. And there is no way to prevent this. If you have any link for individual slides, you can add them with the left side buttons...
This is really amazing but I'm running in to a couple of issues. I add the CSS and HTML into the container as well as the code but the slider still does not show in the build. It shows when I update and press preview. For some reason I cannot change the size of the text that is overlaid and also, the buttons do not work. I have applied as-slider-left/right as classes to each respective button. Any help would be appreciated.
From the edit page you can't see everything. Here you need to use the navigator panel for editing. But, on the actual page everything should be fine...
@@MakeDreamWebsite thanks for the reply, do you have any idea why the left and right buttons aren't working? I've followed along perfectly but when I click them nothing happens.
Have you added the classes with those buttons
@@MakeDreamWebsite I have. as-slider-left and as-slider-right.
You can email me your page link
Thank you big time for this one!
How can I make this in a scroll effect instead? As in everytime you scorll the widget slides?
I'm not able to add the parallax effect on the background. How can I apply this?
Same problem I can't change the wallpaper! Did you find the solution?
@@chawkichoki921 Yahh I got it fixed. You need to try reuploading a picture for the background and configure the background settings from scratch. This worked for me
Hey
THANKS, I take a look tomorrow, but I really appreciate you time and effort!!!Getting back to you tomorrow, and by the way love your work
You're welcome!
Great Video! However the arrow buttons aren’t working for me either even when I activate the arrow on the testimonial carousel. Anyone have an idea ?
Same for me, I am unable to activate the buttons too
Thank you for sharing this, an amazing tutorial as always. I only have one issue though, the background slider doesn't change at all. I don't know what could be wrong, every other thing works perfectly, only this background doesn't change.
Can you please check you have done everything correctly?
Regenerating CSS files helps with the partial functionality issues for once and all, or clearing browser cache each time before you preview gives real-time results.
Yes, you're right. Thanks for sharing that...
Hello! Very useful content thank you so much, I would like to ask is there a possibility in the CSS code written for the side line to change the placeholder of the dots from 1-2-3-4-5 to years? like 1990,1991,1992..etc
Those numbers are basically comes from the JavaScript code. So you need to modify that code
@@MakeDreamWebsite Thank you! Is it possible that the bar on the left be positioned at the bottom of the content? to act as a timeline ruler?
Hiii, thank you for the valuable video, its perfectly working when the text on left side and card on right, but can you please tell me how to add cards on right and text on left? when I adding like this all the cards getting overlay on text. Really appreciate if you can mention the chaning point to fix this!
Troubleshooting Tip: Slider Images Not Appearing
If you’re encountering an issue where slider images are not displaying, follow these steps to resolve the problem:
Check CSS Class Names:
Ensure that the main container for your slider has the correct class name. It should be set as as-slider.
Verify that the testimonial carousel has the class name as-side-slider.
Refresh or Publish:
After confirming the class names, refresh your page or publish the changes. This often resolves display issues by updating the changes.
By following these steps, you should be able to resolve any issues with images not appearing in your slider. If the problem persists, double-check for any additional CSS or JavaScript conflicts that might be affecting the display.
Hi, I have checked and double checked by following the steps, but I am still encountering the same problem.
True value for your subscribers. Continue to post such awesome design nuggets please.
Thanks a lot!🙏
Beauty! Mm can make this with my products to woocommerce? 😮😅😊
No, it's only for static content
Hi. After adding the css and JavaScript followed by the classes as-slider and as-slide-slider , the slider is fading out without wanting to show up.. ( 6:44 ). any advice please? thank you
From the custom css I've made its opacity 0 initially, and make the fade in animation by JavaScript when the page is loaded. It looks okay if you see it from the actual live page. If you want to edit the carousel content, you can also do it from the navigator view.
@MakeDreamWebsite Wow ! Silly me, I've haven't check the code at all, I've just followed the tutorial like a noob. Thank you very much Raiyan. I swear! When I'll get paid by my customer I will share a cut with you. As well, your instant reply is top service. You're blessed brother. 🤗
Thanks a ton! 😇😇 God bless you!
Thank you for amazing tutorials. I have one issue when I insert the code for the left Heading Container the header disappears. can you help with that?
Thank you so much for sharing the tricks! It's absolutely useful and smooth to function on website. Keep it up and we wish to see more contents like this!
You're very welcome!
Thanks for posting this video! i've successfully completed the page following your instruction. I have 1 question about this video. At 14:15 you mentioned that you are able to scroll it down and mine is the same. I've followed the rest of the steps you've said but the problem is still remaining the same. Do you know how could I solve this issue? thanks
You can go to that container and add this CSS line at very beginning: selector { overflow: hidden !important; }
@@MakeDreamWebsite I’ll try as you said tomorrow. Thank you so much for your help, I really appreciated with it
not sure when i'll use it.. but I LOVE IT ! just bought it thank you
Glad you like it!
after adding class to button still its not working , not chaining slides
Can you please double check everything?
Thank you for your quick reply. I'll take care of it
You're welcome!
This is really nice. Thank you so much for sharing. I made this on my localhost and it worked perfectly. But when i pushed my website live, alot of things were breaking. Any idea of how i can fix this?
Can you please remove this section on the live version for test purposes. If the issue persists, then it might related to the server or hosting I think.
VANILLA JS CODE
document.addEventListener('DOMContentLoaded', function () {
var sliders = document.querySelectorAll('.as-slider');
sliders.forEach(function (slider) {
var currentSlide = 0;
var previousSlide = 0;
var slideNumber = slider.querySelectorAll('.as-side-slider .swiper-slide:not(.swiper-slide-duplicate)').length;
var barHTML = '';
var forward;
var textContainers = slider.querySelectorAll('.as-changing-widget');
// Создание индикаторов
for (var i = 0; i < slideNumber; i++) {
barHTML += `${i + 1}`;
}
var bar = slider.querySelector('.as-bar');
if (bar) {
bar.innerHTML = barHTML;
var firstDot = bar.querySelector('.dot');
if (firstDot) {
firstDot.classList.add('active');
}
}
// Настройка текстовых контейнеров
textContainers.forEach(function (container) {
var texts = container.querySelector('.elementor-widget');
if (texts) {
texts.classList.add('currentUp');
container.style.setProperty('--h', texts.offsetHeight + 'px');
}
});
setTimeout(function () {
slider.classList.add('loaded');
if (slider.querySelector('.as-side-slider .swiper-container-initialized, .as-side-slider .swiper-initialized')) {
slider.querySelector('.as-side-slider').classList.add('loaded');
}
var init = setInterval(function () {
if (slider.querySelector('.as-side-slider .swiper-container-initialized, .as-side-slider .swiper-initialized')) {
slider.querySelector('.as-side-slider').classList.add('loaded');
clearInterval(init);
}
}, 50);
}, 500);
// Настройка фона
var settings = slider.getAttribute('data-settings');
if (settings) {
try {
var bgs = JSON.parse(settings).background_slideshow_gallery;
if (bgs) {
var bgHTML = '';
bgs.forEach(function (background) {
bgHTML += ``;
});
bgHTML += '';
var existingBackground = slider.querySelector('.as-slider-background');
if (existingBackground) {
existingBackground.remove();
}
slider.insertAdjacentHTML('afterbegin', bgHTML);
}
} catch (e) {
console.error("Invalid JSON in data-settings attribute: ", e);
}
} else {
console.warn("data-settings attribute is missing or empty.");
}
var backgrounds = slider.querySelectorAll('.as-slider-background img');
if (backgrounds.length > 0) {
backgrounds[0].classList.add('currentForward');
}
// Смена слайдов
setInterval(function () {
var activeSlide = slider.querySelector('.as-side-slider .swiper-slide-active');
currentSlide = activeSlide ? activeSlide.getAttribute('data-swiper-slide-index') : 0;
if (previousSlide != currentSlide) {
forward = (previousSlide < currentSlide) || (previousSlide == slideNumber - 1 && currentSlide == 0);
textContainers.forEach(function (container) {
var texts = container.querySelectorAll('.elementor-widget');
if (texts[currentSlide]) {
container.style.setProperty('--h', texts[currentSlide].offsetHeight + 'px');
texts.forEach(function (text) {
text.classList.remove('prev', 'next', 'currentUp', 'currentDown');
});
backgrounds.forEach(function (bg) {
bg.classList.remove('prev', 'currentBackward', 'currentForward');
});
if (backgrounds[previousSlide]) {
backgrounds[previousSlide].classList.add('prev');
}
if (forward) {
if (texts[previousSlide]) texts[previousSlide].classList.add('prev');
texts[currentSlide].classList.add('currentUp');
if (backgrounds[currentSlide]) backgrounds[currentSlide].classList.add('currentForward');
} else {
if (texts[previousSlide]) texts[previousSlide].classList.add('next');
texts[currentSlide].classList.add('currentDown');
if (backgrounds[currentSlide]) backgrounds[currentSlide].classList.add('currentBackward');
}
}
});
var dots = slider.querySelectorAll('.as-bar .dot');
dots.forEach(function (dot) {
dot.classList.remove('active');
});
if (dots[currentSlide]) {
dots[currentSlide].classList.add('active');
}
}
previousSlide = currentSlide;
}, 500);
// Навигация
var dots = slider.querySelectorAll('.as-bar .dot');
dots.forEach(function (dot, index) {
dot.addEventListener('click', function () {
var paginationBullet = slider.querySelectorAll('.as-side-slider .swiper-pagination-bullet')[index];
if (paginationBullet) {
paginationBullet.click();
}
});
});
var leftArrow = slider.querySelector('.as-slider-left');
if (leftArrow) {
leftArrow.addEventListener('click', function () {
var prevButton = slider.querySelector('.as-side-slider .elementor-swiper-button-prev');
if (prevButton) {
prevButton.click();
}
});
}
var rightArrow = slider.querySelector('.as-slider-right');
if (rightArrow) {
rightArrow.addEventListener('click', function () {
var nextButton = slider.querySelector('.as-side-slider .elementor-swiper-button-next');
if (nextButton) {
nextButton.click();
}
});
}
var arrowLinks = slider.querySelectorAll('.as-slider-left a, .as-slider-right a');
arrowLinks.forEach(function (link) {
link.addEventListener('click', function (e) {
e.preventDefault();
});
});
});
window.addEventListener('resize', function () {
sliders.forEach(function (slider) {
var textContainers = slider.querySelectorAll('.as-changing-widget');
textContainers.forEach(function (container) {
var texts = container.querySelector('.elementor-widget.currentUp, .elementor-widget.currentDown');
if (texts) {
container.style.setProperty('--h', texts.offsetHeight + 'px');
}
});
});
});
});
Thanks a lot for sharing. Absolutely stunning and works like a charm!
You're welcome!
Thank you for the tutorial, I followed the steps and succeeded
Thank you for letting me know!
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?
Great video but I am facing an issue, in tab and mobile view the headings on left side 2 headings are coming together like when I change the image new heading comes up and the previous goes up a little but it stays . How to fix that
Hi, I need your help your 6:51 to 7:01 Java script code not working, It's not showing the slides.
Please help to fix
You can email me your page link...
did you manage to fix it? @makedreamwebsite I am also facing the same issue!
same issue I have, did you fix it? @MakeDreamWebsite please help
hey, thanks for the tutorial, i'm looking for a way to make a button that slide to a specific item , is there a function of slider that can slide an item by index?
On the left side you can see those little index, which are functioning when you click on them...
Hello! Thanks for yout amazing video! I just did it but I would like to make click on image also... Is its possible? I can't find the way to do it by myself... Thanks!
You're welcome! You can put links with each button on the left but there is no option to put links with the slides...
Thank you very much!!! I am not a programmer, The programmer who worked in my company used your slider and my boss has asked me to make the image also functional. At least now I know it is not possible!!! Thank you very much!!! @MakeDreamWebsite
Finished it today for my website 🎉 it was amazing
Glad to know that!
H, I believe I've followed this accurately 3 times now but my images are all stretched and not maintaining correct aspect ratio within the boxes. Please help, I've spent a couple of days trying to find thats wrong.
You can email me
when you do the copy container at minute 4:00 my container doesn't go below the other, it goes to the right side and i can't figure out why, i keep repeating the tutorial
Thanks man! Just used it to show my services on my website - love it!
Thanks for the amazing feedback!
Did you create it? I have a problem with the background, it does not change, maybe there is a problem!
@@chawkichoki921 Same here
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.
Same problem, safari also not smooth. Can anyone help me about that?
That is the first video of yours , which i watch .
I'm going to subscribe and definitely check the content on channel .
Very helpful. .
Amazing.
Thanks! Glad you like it!
Hey! Love this. I just purchased the .json and I can't figure out how to add a second button to one of the slides. Does anyone have a solution? thanks!
I just noticed the slide images stretch instead of expand/zoom
You can email me
@@MakeDreamWebsite thanks man! what’s your email?
friend, thank you very much for your video. I have implemented it on my website and it has been luxurious. I have a question for you, how do I get clicking on the images to take me to a specific URL? That is, eliminate the function of changing the texts on the left when clicking on the images and only taking me to a specific URL, and to change the texts on the left, only leave the arrows.
You can put the links with the left buttons
help i followed all the instruction but im stucked at 7:05, i have pasted the javascript on the html but the result is not the same as yours, i still can't see the sliders
Can you please complete the full tutorial. Then, it will also work in your case.
Is there a work around to do this with latest elementor that doesn't utilize the containers?
With the ready template, you can get the section/column version too!
the right column with slider is working but i don't have a container widget hence i believe the code for the left column is not working which should move the headings simulataneously with the right column., can you help?
You can activate the flexbox from your dashboard...
Hi, amazing video and wonderful features! I followed very carefully and re-watched multiple times, and managed to make it all happen! ...Instead of the background changing part.
I found out that the images I selected for the background slideshow was somehow failing(having red boxes and darkened images from the 2nd one. Only the first image on the gallery is active, and non of the images are over 1920px)
So I went on and bought your template, but strangely the images from your's give me same red-boxed error. Idk what caused this and I really want to figure this out! Best regards...!
Can you please email me
@@MakeDreamWebsite Hi, I emailed you! The page with an issue is named 'KAST-Graphic Novel'. Thank you!
Can we make this template in MS PowerPoint?
No, it only works on Elementor...
Thanks a lot for the amazing slider and carousel. I was wondering if it's possible to make the class = elementor-widget-container scrollable. In order to always have the same amount of text and the overflow then hides the rest.
Did it work successfully? When I post pictures, the large background does not change or move!
Very happy found this channel and video.. ask : i have problem. my slide show background, cannot move when i click card testimonial. How to fix it?
I think the code is conflicting with something else on your site
Hi, I'm doing everything I can to make this responsive because the height on a tablet or mobile device goes "flat".
Unfortunately, I don't have flexbox containers and I can't turn it on.
How can I alter the height/size and resolve this problem in the code?
I tried changing the carousel's media's height in the CSS, but this did not work.
I tried adjusting the height from settings. Not working.
Thank you very much for any help!
same issue with me
Can you make this dynamic? Like a posts carousel and everything is pulled in dynamically?
You can use the dynamic tag option instead of those static content...
@@MakeDreamWebsite @MakeDreamWebsite Hi.. i see you are replying to selective comments only. But people have been asking that the buttons don't work in new elementor even after switching the pagination and arrows
@@campingmiles I test it out on the latest Elementor version and it's working properly. The issue happens because most of them don't follow the steps properly or they just asking without completing all the steps and also sometimes it can be happened due to some conflicts...
@@campingmiles If you face the same issue, please email me. I want to solve it globally so that no one have to ask again...
@@MakeDreamWebsite Sent the email with json template
Could payment features be added to each image for an ecommerce gallery?
You can add payment link with each buttons
Thank you so much for the video! It's not only super easy to follow but also your design skills are impressive! Anyway, I hope you will see this and be able to help me, but on the newest version of Elementor, everything works just like in the video except when I get to setting the "Slides per view" to "3" on the Carousel at minute mark 5:55. My slides don't display right next to each other like it does for you, and when I continue on, I'm only seeing one image. Could you think of why that is?
Sometimes it shows like that on the Edit with Elementor page, but on the actual page everything should be perfect!
sorry, i posted another comment but it might've gotten deleted because i incliuded a link. In the editor I see it like I described above but on the live page, the images don't even show. Do you know why that would be? @@MakeDreamWebsite
Yes, if you you include sometimes it might be auto removed! You can remove the very first line of the html widget. Hopefully, that will work!@@vassil.stoimenov
thanks for following up! Unfortunately, it didn't work. If i purchase your template, do you think it'll work smoothly?
If the video doesn't work, then the template also doesn't work as well. Maybe you have some conflict on your website...@@vassil.stoimenov
as well, can i link a youtube video to the image box so it appears after clicking it within th same page?
Yes, you can in the button link option instead of put a plain link, click on the dynamic tag option and from the select lighbox, for that lightbox you can choose your video...
This is absolutely beautiful, thank you for the tutorial.
You're welcome!
we must use elementor pro or what ???
@@chawkichoki921 I used pro
excelente Video, tengo una consulta en la version de elementor que tengo no me aparece el widget container, de ahí empieza el problema como puedo hacer. gracias, excelente tarde.
No es por la versión de Elementor. Debe activar el contenedor desde el panel de WordPress...
Congratulations on the job.
A video with incredible quality and content.
Thanks 😊
Hi . I have a problem with Changing the heading and the paragraph and also the buttons . Thay are all in the same place and dont hide when i change the slide . Also i checked the video three times , but my problem was not solved . Can you please help me , 😢😢😢
Yes, I'm working on that and update the code snippet...
I just updated the code snippet. Can you please copy paste all the code snippet again...
excellent tutorial and incredible design... here there is an error in the button, in the preview it goes back to the top of the screen instead of rotating the cards, would you know why?
You can email me
Great but containers are grey. Can't see what I'm working with. Can you help?
Can you please complete the whole video process and see it from the actual page…
Great, thanks for this video. I have a question: I design my slider image myself. I prefer a full width slider. What is the ideal size (hight and width) I should make the full width slider image?
Hello, firts of all, would like to thank you for this video, really appreciate that one ! I have a problem with the as-slider arrows, when i click on it after defining their class, it makes me go back on top of the page. Any idea of what could be the problem ? Thank you very much
Those arrows are the default carousel arrow. That shouldn't be happened. That may be a plugin conflict or something else, I'm not sure actually.
Definitely it's a Masterpiece Slider Tutorial. ♥
Thanks a lot!
Hi! Great tutorial! I have a doubt, don't know if anyone can anwser it. I'm trying to keep proportions on the image so it's seen the full image and it resize. Do you know how I can change this to the image of the testimonial? Also there is this akward shadow that I don't want, any clue?