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 Text) JSON 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.
I was looking for a possibility to add a pause button to the Divi Fullwidth Header Slider and found your Module Slider which works great for text modules.
Is there any chance to get it work with the Divi Fullwidth Slider as well?
Hi Gaby.
Thanks for your question.
I am afraid the Fullwidth Slider module is not supported, you can see the supported modules list at the beginning of this post. Adding a pause button to the Fullwidth Slide module would require a different approach.
Quite good work. But I´d love it even more if I had a chance to get rid of the controls and pause the slide on hover with a variable height. Is there any solution for this?
Hi. Where can I find the CSS in the folder?
Please find the CSS in the Code module of the layout, it’s labeled accordingly. The latest version of the layout does not have CSS in a separate file but it comes with the layout file for easier installation.
Just tried the text slider on dusemedia.se and it works perfect. I will style the border when I have more time. Thanks a lot for sharing and keep up the good work!
That’s awesome, Victor. I’m glad it helped :)
Thank you for this! Is it possible to have 2 or 3 modules show up at a time rather than 1?
Hi Rumy.
Showing multiple modules would require a bit different approach using rows(or sections) instead of individual modules as slides. Technically not difficult to implement and I’ll probably release a different version allowing slides with multiple modules sometime later.
Hi, I support this ;=)
Example: Image + Text
by this, I could style the images, paddings etc. easier
Thank you, Connie
Thank you for sharing
Very nice module, but the code appears as a text in the builder
The CSS classes are well indicated, the CSS is in the child theme, I emptied the cache, always the same problem
Did I miss something
Best regard – Hubert
Did you edit the JS code? Make sure it is eclosed inside the
scripttag.SOLVED my question earlier about the AUTOPLAY not working. I copy pasted styles and that messed up the code. I highly recommend editing these modules manually in builder, no copy paste of styles etc.
The Automatic Play did not work for me – any chance there is an error in the code?
No idea why it is not animating
Super Useful & EASY TO USE – thanks for the epic instructions & helpful download files!!!
When I have longer testimonials, the buttons could overlay the quote. Could you help me to solve this issue? Thank you
Thank you for the Testimonial slider. However, I am running into trouble customizing the colors. How do I remove the red-pink previous/next button background?
Doesn’t seem to be in the custom CSS…
Thanks!
Hi Sumu,
the buttons are Blurb Modules, you can customize them in Divi Builder just like any other module.
Dont get file!
Hi Alex,
sometimes it may take a bit longer to deliver, check back later.