Grid to Carousel

This component creates a simple 3 column grid on desktop, that turns into a side scrolling carousel on mobile.

NOTE: This component requires Swiper.js

This component creates a grid that turns into a carousel on mobile.

Click to copy JSON data to your clipboard

NOTE: SwiperJS is required for this to work.

Enqueue SwiperJS

function enqueue_grid_carousel_assets() {

    // Enqueue Swiper CSS from CDN

    wp_enqueue_style( 'swiper-css', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), '8.4.7' );

    // Enqueue Swiper JS from CDN

    wp_enqueue_script( 'swiper-js', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), '8.4.7', true );

}

add_action( 'wp_enqueue_scripts', 'enqueue_grid_carousel_assets' );