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.
Add the following CSS code to Divi → Theme Options → General Tab → Custom CSS:
.divi_blog_slick_slider .et_pb_post {
border: 1px solid #dddddd;
margin: 10px;
padding: 20px;
}
.divi_blog_slick_slider .et_pb_post .entry-featured-image-url {
margin: -20px -20px 20px -20px;
}
/*Style the carousel arrows*/
.divi_blog_slick_slider .slick-prev:before,
.divi_blog_slick_slider .slick-next:before {
color: #6c2fb9;
}
/*Syle the carousel doth navigation*/
.divi_blog_slick_slider .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 tip: Check out the starting guide for the Slick Slider JS Library to learn how it can be customized further.
Pro tip 2: To display all the published posts, set the Post Count option to -1 in Blog Module settings → Content Tab → Post Count