Free Download: Divi Module Slider with Pause/Play Control

by | Nov 30, 2018 | 2 comments

Today’s freebie is the Divi Module Slider Section layouts with pause/play, previous and next controls and infinite scrolling.

It is similar to the Testimonials Slider released earlier but Module Slider has the pause/play control allowing you to control the automatic scrolling.  It also allows you to use not only Testimonial module but other modules too, here is the list of supported modules:

  • Text
  • Call To Action
  • Image
  • Person
  • Pricing Tables
  • Slider
  • Video
  • Video Slider
  • Testimonial
  • Blurb

I’ve made three demos using the Testimonial, Blurb and Text modules (they come with the Freebies Package) to demonstrate that it works with different modules, and you can even mix different modules mentioned above in the same slider, it will still work just fine.

The slider uses the Blurb module for control buttons, the modules for slides, and a bit of JS and CSS.

Demo

How To Download

This download is available to our subscribers only, to download first you’ll need to subscribe via the form below and confirm your email and after that you will receive the Welcome email with the download link.

The existing subscribers don’t need to subscribe again, they always receive the updated Freebies Package immediately after its released.

Requirements

These section layouts require Divi v3.13 and higher.

Installation

The download .zip file includes all of the previously available free section layouts plus the newly added Module Slider section layouts.

After you download the freebies .zip file, unzip it and find the divi-module-slider folder containing all three slider demo section layout(Testimonial, Blurb and TextJSON files and the custom CSS file as well as the README.txt file with installation instructions, make sure you read it carefully.

To install the slider section first import the JSON file of the section layout into the Divi Library.

Then copy and paste the CSS from the CSS file into the Custom CSS field on Divi -> Theme Options page or to you child theme style.css file.

Next, open the page/post where you would like to have the Module Slider section and add the imported section from the Divi Library.

Save everything and you’re done, you can now customize and add your content/modules to the slider.

How To Customize

The slider won’t work in Visual Builder, you will see all of the modules and will be able to customize them as usually. For example, the Module Slider Testimonials demo looks like this in VB:

Make sure the custom CSS classes assigned to the section, row, columns, blurbs and active module are preserved, othervise the slider will not work.

You can add as many modules as you need but one of them has to be assigned the dvcs_ms_current CSS class which will make it active by default. Other modules are not assigned any custom CSS classes.

IMPORTANT: Only one module should be active by default. You can find the full list of CSS classes and elements they are assigned to in the readme.txt file included into the download package. You can always refer back to that list in case you accidentally delete any of the CSS classes.

Configuration

The slider is set to auto-scroll with 3 seconds (3000 ms) time interval by default but you can change that by editing the JS code in the Code module. To do that open the Code module and set the time interval on line 6(six) and disable auto-scroll on line 7(seven) by setting the autoPlay variable value to false as indicated below.

I hope you’ll find the Module Slider useful, subscribe now and grab your copy for FREE and feel free to share your thoughts and suggestion in the comments section below.

Pin It on Pinterest

Shares
Share This