COMPLEXITY
Intermediate
TIME
10 Minutes
ASSUMPTIONS
- Basic knowledge on Divi.
- Divi is already installed and configured
- Comfortable with FTP-ing into your site and uploading files
- A Child Theme is Installed and Active
VERSIONS
Divi 4.9.4
In this tutorial, we will take a look at how we can make some awesome sliders with the ability to slide anything in Divi using Slick.js, a lightweight javascript library with a ton of cool features. We have all been in that position where our Divi lives would just be a little bit easier if I could have a slider with a bunch of Divi Blurb Modules, maybe a row, or even a combination of these Divi elements. Don’t worry, your Divi Engine fam is here to show you how without the need for yet another plugin, instead we will only use a few lines of code, and this awesome library.
Time to take a closer look!
Preview:
Slick What Now?
Great question! Slick Slider is a free JavaScript library with a ton of useful features that makes sliding anything on your website an absolute breeze. Our favorite part? We can easily integrate it to any Divi WordPress site to give you the ability to slide various elements with very little code.
Check out some of the feature highlights:
Fully responsive. Scales with its container.
Separate settings per breakpoint.
Swipe enabled. Or disabled, if you prefer.
Fully accessible with arrow key navigation.
Infinite looping.
Autoplay, dots, arrows, callbacks, etc...
So now that we know why Slick Slider will make our Divi site look awesome, let’s take a look at how we integrate it into our site.
Video Tutorial
Text Instructions
IMPORTANT NOTE: IF (and only IF) you are using BodyCommerce or Divi Machine we have great news, you can totally skip Steps 1 & 2 as we have already integrated Slick.js for you 😁
Step 1) Add the Slick.js files to your Child Theme
Download Slick.js
Head over to https://kenwheeler.github.io/slick/ and download the zip file and extract the files.
Upload Slick.js
Using your favorite FTP client, upload the extracted Slick folder to your WordPress site in the Child Theme folder.
NOTE: This tutorial assumes that you know how to FTP into your WordPress install and upload files. If you are not sure how to do this, please check out this awesome tutorial by the team at Elegant Themes that will help you out.
Step 2) Integrating Slick.js into your Divi WordPress install
With our files uploaded, let’s integrate the Slide.js files into our Divi install.
Copy and Paste the following code into the <head> section:
NOTE: If you have any issues, make sure that the Slick folder is uploaded directly to the root of your Child Theme. If you don’t have a child theme be sure to check out this great tutorial on How to Create a Divi Child Theme with Dynamic CSS.
Step 3) Create your first Slick Slider in Divi
Add Single Column Row that will house all the Divi modules which we will slide using Slide.js
Add any number or variation of modules you want to slide, we will use a Divi Blurb module for this tutorial
Step 4) Add some jQuery magic
To start utilizing Slick.js on this Divi page, we need to add some jQuery to designate what type of slider we are building and what class will be used to assign our parent container for the Divi Modules that will make up our slides.
Add a New Section
Add a New Single Column Row
Add a Code Module then copy/paste the code below between opening and closing <script> tags:
NOTE: You can find a list of different examples of different settings and slider styles by following this link.
Step 5) Add the CSS class we designated to our Parent Container
Row Settings > Column Settings
Column Settings
Advanced Tab
CSS Class: slide-stuff
Great job, you nailed it!
NOTE: If you are having issues with getting the slider to work as shown here, it is very likely that you are using the wrong path to your child theme from Step 2. You can verify whether this is the issue by inspecting the page and seeing whether there is a 404 error regarding the slick.js files. Just make sure to replace [your child theme folder] with your Child Theme folder as it is on your web server.
Conclusion
That wasn’t so hard now was it? Sliding a variety of modules is a great way to make your Divi WordPress site shine and stand out from the rest. But the good news does not end there. If you are using either BodyCommerce or Divi Machine on your site you can skip step 1 and 2 because we already did the Slick.js integration for you. All you need to do is initialize Slick.js on the Divi pages where you want to use the plugin with the class name you need to assign to the parent of the elements you want to slide. Awesome stuff!
We hope that learning how to slide anything in Divi using Slick.js was a fun adventure for you and we can’t wait to see what you build with this new skill. Definitely drop a comment below with links to your awesome creations and any suggestions you might have for future tutorials.
nice do you have a json of this?
Is there a way to add a module inside the parent container that is NOT a part of the slider?
I have to add a static text module below my slider modules, but I cannot put it in a new row or section due to it being a slider within a slider. Any css I can add that make it ignore the columns-class or something like it?
I can’t seem to get this to work with the Post Slider module to make it so that you can drag and swipe to the next item in the Post Slider set. Any secrets to share on how that could work?
tks a lot for the post, but i have an problem the layout is breaking on frontend, on DIVI it looks great but on live it breaks
Hey Thanks for a great video!
I have followed you’re video 1/1 but i can’t get it to work!
I get this Error : “Refused to apply style ‘https/www.aarhusaabnerop.dk/wp-content-themes-Divi-Child-Theme/style.css?ver=5.8.1’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
The file path is correct!
Have you seen this error before?
Thanks I have been looking for this feature for a while. But is it really necessary to use FTP? I dont have any and of course I can get it, but for just this one feature it seems a bit complicated.
You don’t need to but it is better to have this. You could link direct to the script on cdnjs = https://cdnjs.com/libraries/slick-carousel
Let me know if this makes sense
Well actually tried to go through with the implementation, but I can’t seem to get it to transform into a slider.
The blurbs keep on being vertically stacked. I use the exact naming of the child theme folder, so that should be ok. In inspect mode I can see this error: Uncaught TypeError: $(…).slick is not a function
at HTMLDocument.eval (eval at ((my website url)/:2), :4:21)
at e (jquery.min.js?ver=3.6.0:2)
at t (jquery.min.js?ver=3.6.0:2)
Any idea what is wrong?
we have the same problem in the slick slider that implemented on the site ive been working on.
Same issue. Did anyone got a solution for this.?
Same issue here. It was working a few weeks ago but no longer works. Everything is vertically stacked on the left-hand side of the page. we were originally using v1.6.0 via the “Icecream Divi Slider.”
Figured it out. If you’re on the newest Divi version, they have a new tab under Divi > Theme Options > Performance. At the bottom is a toggle for “Defer jQuery And jQuery Migrate” — make sure that’s turned off. I’ve noticed a lot of strange front-end functionality issues with third party plugins/JS so we’ve turned this option off on all Divi builds and it’s worked in most cases to solve the issue.
Joe thank you so much.
It was the “Defer jQuery” that was giving me so much trouble.