Add Slick slider to Divi

In elementor environment, you can easily add slickjs through the theme, but in Divi, it's a different story. Here's how:

Create a new code widget and add this code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<script>
  jQuery(function($){
   
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.classofyourdesiredslick .et_pb_ajax_pagination_container');
   
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 
 
$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
   
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]
 
});
});
</script>

You have to adjust the variable of backButton, nextButton and postContainer of teh code above. For tips, create the back and next button using blurb widget. For further information, you can access the article here: https://www.wppagebuilders.com/turn-divi-blog-module-into-carousel/

Last updated