Skip to main content

Turn Archive Loop Into Carousel/Slider

Introduction

Follow these steps to turn the Archive Loop module into a Carousel/Slider.

Step 1: Add The Archive Loop

Add the Archive Loop Module to a page.

Add the Carousel Module under the Archive Loop module and leave it blank or render 0 posts so that nothing loads.

Step 3: Add JavaScript

Utilise Slick JS to create the carousel. Go to Divi > Theme Options > Integrations and add the code below to the body section (or add it in a code module on the page/layout). This will make a carousel with 3 slides. Customise to your requirements - see documentation on here: https://kenwheeler.github.io/slick/

NB: This is custom code and used only for advanced users

<script>
jQuery( document ).ready(function() {
jQuery('.divi-filter-archive-loop .grid-posts').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>