By turning the Blog Module into a carousel using the Slick Slider JS library, you can create a dynamic and interactive display of your blog content.
This approach not only makes your blog more attractive but also allows users to easily browse through posts.
This article will guide you through the steps to integrate Slick Slider with Divi’s Blog Module, enabling a smooth and engaging carousel experience for your visitors.
For this customization, we are going to use the Slick Slider JS library.
A demo of the end result can be seen in the GIF below:
Blog Module setup
Open the Blog module's settings, go to Content Tab → Elements, and deactivate the Pagination.
Go to Design Tab → Layout and choose Fullwidth.
Go to Advanced Tab → CSS ID & Classes → CSS Class and type in: divi_blog_slick_slider.
Go to Advanced Tab → Custom CSS → Free Form CSS and paste in this CSS snippet:
selector .et_pb_post {
border: 1px solid #dddddd;
margin: 10px;
padding: 20px;
}
selector .et_pb_post .entry-featured-image-url {
margin: -20px -20px 20px -20px;
}
selector .slick-prev:before,
selector .slick-next:before {
color: #6c2fb9;
}
selector .slick-dots li button:before {
color: #6c2fb9;
}Add the following JS code to Divi → Theme Option → Integration tab > Header:
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
<script id="divi-blog-module-slick-slider-carousel">
(function ($) {
$(document).ready(function () {
if ($('.divi_blog_slick_slider').length) {
$('.divi_blog_slick_slider .et_pb_ajax_pagination_container').slick({
dots: true,
arrows: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
});
}
});
})(jQuery);
</script>
Pro Tips:
Check out the starting guide for the Slick Slider JS Library to learn how it can be customized further.
To display all the published posts, set the Post Count option to
-1in Blog Module settings → Content Tab → Post Count