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:

Slide anything in Divi with Slick.js slider

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:

N

Fully responsive. Scales with its container.

N

Separate settings per breakpoint.

N

Swipe enabled. Or disabled, if you prefer.

N

Fully accessible with arrow key navigation.

N

Infinite looping.

N

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.

Slick Slider in Divi

Video Tutorial

Text Instructions

If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.

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.

Head over to Divi > Theme Options > Integration Tab

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

Create a New Page > Build From Scratch > Start Building

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

Open the Column Settings for the row containing all the modules we will be sliding.

Row Settings > Column Settings

Column Settings

Advanced Tab

CSS Class: slide-stuff

Great job, you nailed it!

Add Slick.js Slider to Divi Site - 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.