DIVI slide any modules with Slick.js slider

You can slide anything in a DIVI column with this slider.
Slider is free, check the demo examples here: https://kenwheeler.github.io/slick/
and download it from the same page.

Use it in 5 easy steps:

1. Create a directory inside your Divi-child-theme and add the slick files: /slick/
From the downloaded pack, coly paste only the contents of the /slick/ folder.

2. Go to Divi > Theme Options > Integration Tab and Copy and Paste the following code into the <head> section to call the slick files:

<link rel="stylesheet" type="text/css" href="/wp-content/themes/[your Divi-child-theme folder]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/[your Divi-child-theme folder]/slick/slick-theme.css"/>

<script type="text/javascript" src="/wp-content/themes/[your Divi-child-theme folder]/slick/slick.min.js"></script>

3. Create a Section > Row > single Column and add there i.e. 5 Image modules (or whatever modules you want).

4. Create a new Section > Row > single column and add a Code module with the slick jQuery
(you can use the code you like from the above demo link page)

jQuery(function($){
  $('.your-class').slick({ // The class that you will add to parent div, here in the Column the parent container for the Divi Modules that will make up our slides
    infinite: true, // Loop the slider for ever
    slidesToShow: 3, // How many slides should be visible
    slidesToScroll: 1 // How many slides should scroll 
  });
});

5. Last step, add the class “your-class” to the Column with the Images: Column setting > advanced tab > Css class

That’s it, your images should be sliding right now!

Scroll to Top