This is exactly what I have spent days trying to achieve with various heavy loading plugins. This is easy and beautiful - thank you for teaching this and providing the code for free! Much appreciated.
This gentlman is one of my favorite Divi instructors. Clear, concise and to the point. Moves at just the right speed and clearly explains the 'why' behind the details. IMO, far superior to the rapid-fire, low-explanation Elegant Themes instructors that seem oriented toward more advanced users than me. The customer support from Divi Life is also excellent. I recommend!
THANK YOU! I finally found the right help with your video. Took me 5 hours to get to it after so many tries with other tutorials, but I'm relieved nonetheless. I used testimonial modules instead of blurb modules, so I made sure to replace "blurb" wherever I saw it in the code with "testimonial" and it worked like a charm! Mucho gracias!!
That was an amazing tutorial. Easy to understand, and with an amazing result to websites. Really happy to be improving my website's look by using more and more of these tutorials. Thanks a lot for that!
Hello Tim, thanks for this tutorial, it works perfectly! I was wondering if it’s possible to add a clickable link to each image that would redirect to another page? I’ve made a few unsuccessful attempts. Thank you !
Thank you, Tim. You teach me so much and it's greatly appreciated. I love your products especially the "bricks". That's why I bought an All Access pass. That and my Elegant Themes lifetime pass are the best purchases I have ever made. I am looking at your carousel layout packs. What I want is a carousel with 5 images that shows 1 image at a time and is full width. I'm thinking that Carousel layouts 2 and 3 might be adaptable. Am I on the right track. Thanks.
This was incredibly helpful! This was the third tutorial I followed and it worked the best AND it was free (no paid plugins) AND it's lightweight on code for the site's speed. Plus, I learned some Divi time-saving skills along the way. Thank you! For anyone that missed @DiviLife 's comment from two years ago, you can make this auto scroll by adding "autoplay: true," after "slidesToScroll: 1, " (without the quotes).
Thank you. This tutorial is almost perfect. The only little thing missing is that the carousel should slide automatically. If anyone knows how to do this please comment! However, big props for the tutorial. It works very well. Btw, I could even use it for a blog module carousel. Just had to make it fullwidth , show only one post, copy it 6 times and set a post offset number for the different blog modules starting from 0 to 5. I am hyped! Thank you once again!
Hey Tim... Something you might find handy for video tutorials is to use a split screen setup. Then you can have the code and Divi editing area on one side and the live site on the other side. Really helps to not have to jump in and out of the builder to see the final rendered front end code. Especially on designs which you can't see in the Visual Builder it makes the editing process much faster. I use it all the time for this purpose and would never go back to tab jumping in the same browser window as the main navigation method. Also, get a Blackmagic ATEM Mini for your videos. I'd say the Extreme, but even just the Pro ISO and you'll have a lot more dynamic control over your video sources. Love your plugins and am a long time purchasing supporter!
Hey Glen, thanks for the feedback. I don't plan on ever doing a split screen set up for videos because it would make everything too small and hard to see, especially for users with smaller screens. I tested the ATEM Mini Pro a while back but ended up returning it. It didn't really gain me anything for my needs, but took away my ability to change sources in my software.
Okay, seems RUclips won't let me name all of the components to set up the ATEM Extreme without flagging it as spam. I had this happen on another video. Check your spam area to see the full comment. I don't know why it thinks it's spam. It's just naming the different components for a full setup, and the best setup.
Lovely Tutorial, Easy to follow and gives a nice carousel without a plugin. If I could ask a question, with blurb/testimonials being different length (some one sentence some five) is there a way to force equal sizes in the carousel? Thanks.🙂
Hi, thanks for the video! I don't understand why in my carousel the titles of the summary modules are not aligned while my images/icons are the same size, thanks!
superb tutorial like a pro. Just one thing. Whenever you make next tutorials please do something that website fonts look bigger. It's very difficult to see even in FULL HD
Thanks for a very good video. However, I have a small problem that I do not get organized. On mobile devices I get an extra arrow inside the left arrow where you can browse the carousel. What is the reason for. At Desktop you do not see it, but it is only on mobile devices.
Awesome video, unfortunately, after going through the steps about ten times with no luck when I exit edit mode, the blub modules are just lined up vertically. Yes, I was careful not to put the first CSS in the column not the row menu, separate the divilife-3-col-feature-blurb-slider in the column CSS divilife-3-col-feature-blurb in the blub settings New row, code module at the coding ... but no carousel. So I installed the free one you sent me and it is the same. I can't figure out why it doesn't work on my site. I would really appreciate it if you had any ideas
Hey there, sorry to hear about it not working. If the layout we sent isn’t working either then it sounds like there is something blocking the carousel script from loading correctly on the page. It could be a plugin conflict, or cache. I’d recommend trying with your plugins deactivated and see if it works. Then activate them again one by one to find which one is conflicting.
@@DiviLife THank you. When I went back to it after letting it sit for several hours it was working. I think it is because my hosting service has my site on multiple servers, any coding added takes awhile to update. I just walked through the process of sprucing it up to look good, adjusting sizing and shadows. some of the adjustments take effect, but not the margins. Again, I will let it sit for a few hours and wait. Thank you for taking the time. I have enthusiastically Liked and Subscribed!
@@timdetmerI also have similar problem, everything is almost perfect but blurbs ans sticked together without any space between them, on mobile the blurb is somehow shifted to the right side so about 10% of the right side is cut, on the left side there is about 10% of background @DiviLife
Great and useful tutorial. 👍 I want to know, How to change a number of columns in the carousel? Instead of 3 if we want 4 or more columns to slide. Can you with that.
Glad you liked the tutorial! Yep, you can do that! In the code module with the carousel script, theres a rule that defines the number of columns. Simply change that from the set number to your desired number of columns and it will change 🙂
HI Tim, It works and looks very well on desktop, but on phone I'm experiencing horizontal scroll, I'm having the same issue when I'm following the tutorial of Donjetë Vunjiqi from Elegant Themes. I just can't get it right, any sugestions?
Hi Tim, I used the carousel on the image module and although I can sift through the images, they dont open up to be full screen. Is there a work around to this?
Thanks for the video! Everything works except when I change the colour codes for the arrows etc it doesn't change on the front end. Any thoughts as to why? Cheers
Hello, thank you for this good tutorial! I would like to make a carousel with the testimonial module that displays the testimonials one by one, but I didn't manage to modify the code... Can you help me or detail the advantage code so that I can modify it efficiently? Thanks in advance
Hey Tim! I'm considering buying the all access pass. One thing I would like to know more about is video carousel. Is it possible with the all access bundle? Both as a section on the page and maybe as a hero section as well? Much appreciated! :)
Hi Rasmus, We actually have a carousel module being released for Black Friday that will allow you to create video carousels and more! It allows you to use layouts in your library as carousel items so you can use videos, or entire sections, etc. within your carousel. :)
@@DiviLife Hey, I bought the full access pass and I have tried to customize some of the 16 carousel modules without luck, even the carousel layout nr. 13. I can get a video to play in the background of each carousel but then it is on autoplay and visitors can't stop the video and play another instead, all videos start at the same time. I can insert link to video, but that link opens in another vindow. Is it possible you can make a video carousel setup video and maybe include the carousel section functionality? Perhaps my request evoke something you can add as well :)
Is it possible to disable dragging? I'm using a "Supreme Before/After Image slider" so I need the carroussel to stay still when the user drags the before and after and the carrousel should only move when the user clicks on the arrows or dots. Any ideas? Thank you so much!
You mean you only want the carousel to show on mobile? You can use Divi's built in responsive editing tools to hide the entire carousel section on Desktop and Tablet :)
Hello everyone! Does anyone have this problem with this slider? The distance between the reviews is close, although I download the file from the guys' site, where all the sizes are already corrected. Padding and Margin are set. Who knows what the problem is?
I am very disappointed to find that even though I have done as you said and signed up to the email list and logged into my divi account I am still being asked for £24 for the divi carousel layout pack. Whilst I recognise that you will change your offers, it would only be fair surely to also update your utube offers so that I and other are not disappointed.
Nothing has changed. There’s still a free layout included with this tutorial as promised. It’s only one layout though. The entire layout pack costs money, and has always cost money. The free carousel layout is only for one layout.
Thank you for your response, but when I click on your links it only takes me to the whole pack and not to the layout. Can you advise where I am going wrong I don't want all of them, just the one you used. It fits in perfectly with what I am wanting to do. I followed every link and each time I am being taken to the pack only
If you click on the button that says “Download the Carousel for Free” it will open a popup to put your name and email. Then you’ll get an email with a download link. Check your spam folder if you don’t see the email.
Maybe its because of a Divi update, but Divi adds an additional .et_pb_column inside the column with the .divilife-3-col-feature-blurb-slider class. This results in Slick slider adding the .slick-slider class (the class that slick slider needs to add to the slide container) to the wrong element. To fix this, use the following selector on line 117 of the code provided by this tutorial: .divilife-3-col-feature-blurb-slider .et_pb_column
A year old and still hugely relevant. Three issues. Have reduced visible slide to one as I am using image positioned to left. I have 5 images yet it is showing a blank sixth? Is it possible to reposition the arrows? Perhaps higher up in line with my images instead of below. Lastly, too much space between the dots at the bottom and what is above. Any help greatly appreciated. Ta
Something I'm not seeing is the carousel auto rotating. The slider plugin I'm using does auto move the modules and it uses slick, so is there a way to get them to move without having to click on the dots? I like this solution a lot more, but really want it to move on its own.
Yes, you can easily enable the autoplay within the settings for the carousel (Customizing Carousel Settings: 23:25). Just add "autoplay: true," after "slidesToScroll: 1, " (without the quotes) and that will do it :)
Okay good. I'd like that option with showing only 1 slide (by editing the slidesToShow: 3, section). Slider plugins are usually quite heavy, so this is great info!
Please help! Everything was very straight forward and I followed all the steps, but the blurbs all show up stacked on top of each other and the code shows up written on the website, almost like it is in a text box. @divilife
This is exactly what I have spent days trying to achieve with various heavy loading plugins. This is easy and beautiful - thank you for teaching this and providing the code for free! Much appreciated.
This gentlman is one of my favorite Divi instructors. Clear, concise and to the point. Moves at just the right speed and clearly explains the 'why' behind the details. IMO, far superior to the rapid-fire, low-explanation Elegant Themes instructors that seem oriented toward more advanced users than me. The customer support from Divi Life is also excellent. I recommend!
Cool tutorial. I was able to create a photo gallery with it. Thanks a lot!
thank you for saving me 3 hours of tube surfing! Awesome job!
Oh God, this is such a balsam for my brain - your way of explenation is sooo excellent, thank you!
You’re welcome! Glad it was helpful 🙂
Thank you so much, this help me a lot is just the carousel I needed
You're very welcome! 😎
THANK YOU! I finally found the right help with your video. Took me 5 hours to get to it after so many tries with other tutorials, but I'm relieved nonetheless. I used testimonial modules instead of blurb modules, so I made sure to replace "blurb" wherever I saw it in the code with "testimonial" and it worked like a charm! Mucho gracias!!
That was an amazing tutorial. Easy to understand, and with an amazing result to websites. Really happy to be improving my website's look by using more and more of these tutorials. Thanks a lot for that!
Hello Tim, thanks for this tutorial, it works perfectly!
I was wondering if it’s possible to add a clickable link to each image that would redirect to another page? I’ve made a few unsuccessful attempts.
Thank you !
it works well! thank you 🙌
Just wahat we were looking for today. Thanks Tim.
Great tutorials. Featuring this on our new website (with modifications of course)
Thank you, Tim. You teach me so much and it's greatly appreciated. I love your products especially the "bricks". That's why I bought an All Access pass. That and my Elegant Themes lifetime pass are the best purchases I have ever made. I am looking at your carousel layout packs. What I want is a carousel with 5 images that shows 1 image at a time and is full width. I'm thinking that Carousel layouts 2 and 3 might be adaptable. Am I on the right track. Thanks.
This was incredibly helpful! This was the third tutorial I followed and it worked the best AND it was free (no paid plugins) AND it's lightweight on code for the site's speed. Plus, I learned some Divi time-saving skills along the way. Thank you! For anyone that missed @DiviLife 's comment from two years ago, you can make this auto scroll by adding "autoplay: true," after "slidesToScroll: 1, " (without the quotes).
Thank you. This tutorial is almost perfect. The only little thing missing is that the carousel should slide automatically. If anyone knows how to do this please comment! However, big props for the tutorial. It works very well. Btw, I could even use it for a blog module carousel. Just had to make it fullwidth , show only one post, copy it 6 times and set a post offset number for the different blog modules starting from 0 to 5. I am hyped! Thank you once again!
This is awesome, thank you. Been hoping to add this to my website for a couple of years now.
Hey @Divi Life. I have a lot of white space under my carousel, how can I fix this?
Maravilloso ♥ Gracias!
Your tutorials are awesome. And very easy to understand. Keep it up... and thanks.
This is exactly what I've been looking for! Thank you!!
Awesome! I'm so glad to hear it was helpful :)
Excellent - just what I needed! I've been able to implement it on my website and tweaking it just the way I want it.
That's great to hear!! :)
Hey Tim... Something you might find handy for video tutorials is to use a split screen setup. Then you can have the code and Divi editing area on one side and the live site on the other side. Really helps to not have to jump in and out of the builder to see the final rendered front end code. Especially on designs which you can't see in the Visual Builder it makes the editing process much faster. I use it all the time for this purpose and would never go back to tab jumping in the same browser window as the main navigation method.
Also, get a Blackmagic ATEM Mini for your videos. I'd say the Extreme, but even just the Pro ISO and you'll have a lot more dynamic control over your video sources. Love your plugins and am a long time purchasing supporter!
Hey Glen, thanks for the feedback. I don't plan on ever doing a split screen set up for videos because it would make everything too small and hard to see, especially for users with smaller screens. I tested the ATEM Mini Pro a while back but ended up returning it. It didn't really gain me anything for my needs, but took away my ability to change sources in my software.
By the way your video quality and background are great! You are definitely making sure to present well.
Okay, seems RUclips won't let me name all of the components to set up the ATEM Extreme without flagging it as spam. I had this happen on another video. Check your spam area to see the full comment. I don't know why it thinks it's spam. It's just naming the different components for a full setup, and the best setup.
@@glenallan6279 Thank you! I appreciate that very much :)
Lovely Tutorial, Easy to follow and gives a nice carousel without a plugin. If I could ask a question, with blurb/testimonials being different length (some one sentence some five) is there a way to force equal sizes in the carousel? Thanks.🙂
thank you somuch man, I use this in a job!!
Will this be able to work with background images?
Thank you for optimizing my project.
When my success comes, I'll repay you by buying from your store!
Thank you so much sir. This is awesome.
Hi, thanks for the video! I don't understand why in my carousel the titles of the summary modules are not aligned while my images/icons are the same size, thanks!
Hey, works well with most modules. Any advice how to style it with Shop module?
superb tutorial like a pro. Just one thing. Whenever you make next tutorials please do something that website fonts look bigger. It's very difficult to see even in FULL HD
Loved the tutorial. Thanks!
You're welcome! :)
Is it possible to do a dynamic post carrousel same style ?
Thanks for a very good video. However, I have a small problem that I do not get organized. On mobile devices I get an extra arrow inside the left arrow where you can browse the carousel. What is the reason for. At Desktop you do not see it, but it is only on mobile devices.
Awesome video, unfortunately, after going through the steps about ten times with no luck when I exit edit mode, the blub modules are just lined up vertically. Yes, I was careful not to put the first CSS in the column not the row menu, separate the
divilife-3-col-feature-blurb-slider in the column CSS
divilife-3-col-feature-blurb in the blub settings
New row, code module at the coding
... but no carousel.
So I installed the free one you sent me and it is the same.
I can't figure out why it doesn't work on my site.
I would really appreciate it if you had any ideas
Hey there, sorry to hear about it not working. If the layout we sent isn’t working either then it sounds like there is something blocking the carousel script from loading correctly on the page. It could be a plugin conflict, or cache. I’d recommend trying with your plugins deactivated and see if it works. Then activate them again one by one to find which one is conflicting.
I; am going to try that right now. I DID try it on a fresh page, but plugins sounds like a good way to troubleshoot this.@@DiviLife
@@DiviLife THank you. When I went back to it after letting it sit for several hours it was working. I think it is because my hosting service has my site on multiple servers, any coding added takes awhile to update. I just walked through the process of sprucing it up to look good, adjusting sizing and shadows. some of the adjustments take effect, but not the margins. Again, I will let it sit for a few hours and wait. Thank you for taking the time. I have enthusiastically Liked and Subscribed!
@@timdetmerI also have similar problem, everything is almost perfect but blurbs ans sticked together without any space between them, on mobile the blurb is somehow shifted to the right side so about 10% of the right side is cut, on the left side there is about 10% of background @DiviLife
Great and useful tutorial. 👍
I want to know, How to change a number of columns in the carousel?
Instead of 3 if we want 4 or more columns to slide.
Can you with that.
Glad you liked the tutorial! Yep, you can do that! In the code module with the carousel script, theres a rule that defines the number of columns. Simply change that from the set number to your desired number of columns and it will change 🙂
HI, Can this code works with the Divi Woo Products? Thank you
Can I do this with blog post module?
HI Tim, It works and looks very well on desktop, but on phone I'm experiencing horizontal scroll, I'm having the same issue when I'm following the tutorial of Donjetë Vunjiqi from Elegant Themes. I just can't get it right, any sugestions?
So if using images instead of blurbs do you need to use a different class for that ?
Is it possible to autoplay the carousel?
Hi Tim, I used the carousel on the image module and although I can sift through the images, they dont open up to be full screen. Is there a work around to this?
Thanks for the video! Everything works except when I change the colour codes for the arrows etc it doesn't change on the front end. Any thoughts as to why? Cheers
Can this be used to create a video carousel?
Hello, thank you for this good tutorial!
I would like to make a carousel with the testimonial module that displays the testimonials one by one, but I didn't manage to modify the code... Can you help me or detail the advantage code so that I can modify it efficiently?
Thanks in advance
Hey Tim! I'm considering buying the all access pass. One thing I would like to know more about is video carousel. Is it possible with the all access bundle? Both as a section on the page and maybe as a hero section as well? Much appreciated! :)
Hi Rasmus,
We actually have a carousel module being released for Black Friday that will allow you to create video carousels and more! It allows you to use layouts in your library as carousel items so you can use videos, or entire sections, etc. within your carousel. :)
@@DiviLife Excellent, you have my order tomorrow. Thanks for the fast response Tim ;-)
@@DiviLife Hey, I bought the full access pass and I have tried to customize some of the 16 carousel modules without luck, even the carousel layout nr. 13. I can get a video to play in the background of each carousel but then it is on autoplay and visitors can't stop the video and play another instead, all videos start at the same time. I can insert link to video, but that link opens in another vindow.
Is it possible you can make a video carousel setup video and maybe include the carousel section functionality? Perhaps my request evoke something you can add as well :)
Can this be achieved with images, the same way?
How do I get the dot to the middle of the slide. Its showing on the side.
unfortunately it did not worked, the page failed to save when the script is inserted!
followed everything on a new website with no plugins and didn't work.
very usefull thank bro
Is it possible to disable dragging? I'm using a "Supreme Before/After Image slider" so I need the carroussel to stay still when the user drags the before and after and the carrousel should only move when the user clicks on the arrows or dots. Any ideas? Thank you so much!
Yes, you can do that! In the code, after line 119, add draggable: false, and that should disable the dragging. :)
How is it possible to allow that only on mobile devices?
You mean you only want the carousel to show on mobile? You can use Divi's built in responsive editing tools to hide the entire carousel section on Desktop and Tablet :)
It works for testimonials & blurb etc but it doesn't work for Blog module. Can anyone help me?
Hello everyone! Does anyone have this problem with this slider? The distance between the reviews is close, although I download the file from the guys' site, where all the sizes are already corrected. Padding and Margin are set. Who knows what the problem is?
Why is this smash together? When I use your premade file?
I am very disappointed to find that even though I have done as you said and signed up to the email list and logged into my divi account I am still being asked for £24 for the divi carousel layout pack. Whilst I recognise that you will change your offers, it would only be fair surely to also update your utube offers so that I and other are not disappointed.
Nothing has changed. There’s still a free layout included with this tutorial as promised. It’s only one layout though. The entire layout pack costs money, and has always cost money. The free carousel layout is only for one layout.
Thank you for your response, but when I click on your links it only takes me to the whole pack and not to the layout. Can you advise where I am going wrong I don't want all of them, just the one you used. It fits in perfectly with what I am wanting to do. I followed every link and each time I am being taken to the pack only
If you click on the button that says “Download the Carousel for Free” it will open a popup to put your name and email. Then you’ll get an email with a download link. Check your spam folder if you don’t see the email.
ERROR to upload the zip in wordpress
Thank you :)
Maybe its because of a Divi update, but Divi adds an additional .et_pb_column inside the column with the .divilife-3-col-feature-blurb-slider class. This results in Slick slider adding the .slick-slider class (the class that slick slider needs to add to the slide container) to the wrong element. To fix this, use the following selector on line 117 of the code provided by this tutorial:
.divilife-3-col-feature-blurb-slider .et_pb_column
Thanks!
Is the .et_pb_column added to the existing selector on line 116 or is it addd to a new line on 117? I can't get it to work for me
@@RoFulcher I added it to line 116 jQuery('.divilife-3-col-feature-blurb-slider .et_pb_column').slick({ worked 100%
Thanks
@@grantgp its works for me also. thanks.
A year old and still hugely relevant. Three issues. Have reduced visible slide to one as I am using image positioned to left. I have 5 images yet it is showing a blank sixth? Is it possible to reposition the arrows? Perhaps higher up in line with my images instead of below. Lastly, too much space between the dots at the bottom and what is above. Any help greatly appreciated. Ta
Change vertical position of arrows: line 44 - top: 50%;; decrease %tage to move up. Increase %tage to vertically move down.
Reposition dots. Line 71, bottom value changed to 35%. So far so good
Attempted to get this working, using text modules instead of the blurb moduels, but it is not working. Wonder if reent DIVI updates have broken this?
Check my solution
Extra dot. Extra blank slide. 5 images showing 6, with one blank?
thanks a lot
I want to use an image instead of an icon, how will that work?
That will work just fine. You can simply edit the blurb module to show an image instead of the icon :)
@@DiviLife Thanks, It's work
not working for me
Check my solution
This is almost perfect. But I need to create a carousel in a multi-column row, not a 1 column row. Doh! Nice script though.
Something I'm not seeing is the carousel auto rotating. The slider plugin I'm using does auto move the modules and it uses slick, so is there a way to get them to move without having to click on the dots? I like this solution a lot more, but really want it to move on its own.
Yes, you can easily enable the autoplay within the settings for the carousel (Customizing Carousel Settings: 23:25). Just add "autoplay: true," after "slidesToScroll: 1, " (without the quotes) and that will do it :)
Okay good. I'd like that option with showing only 1 slide (by editing the slidesToShow: 3, section). Slider plugins are usually quite heavy, so this is great info!
@@glenallan6279 yeah absolutely :)
Obrigado pela ajuda!
👏👏
how do you. make this carousal auto scroll?
I have the same question as Hareesh. Did anyone ever figure this out? Thanks!
2.0 playback speed
vampire !!!
TIPS: Increase the volume for your next videos or compare this one to others most recently. YOU ARE A CRACK!!!
Please help! Everything was very straight forward and I followed all the steps, but the blurbs all show up stacked on top of each other and the code shows up written on the website, almost like it is in a text box. @divilife