How to Create a Vertical Carousel

Support articles → Simple Carousel Block

Though the carousel block doesn’t have specific settings for creating vertical carousels, you still can easily do it in two simple steps and as a result you’re going to have a carousel which scrolls in vertical direction kind of like this one:

Vertical logo carousel.

Step 1. Set a CSS-class for a specific carosel in its block settings

First of all we need to decide which carousel on the page specifically is going to be a vertical one, and to add any custom CSS class to this block.

So let’s just select a specific “Carousel” block (not a “Slide” block), then go to its block settings and then – “Advanced” section.

How to add a custom CSS class to a carousel block
I used is-vertical-carousel, but you can use whatever you like.

Step 2. Use the snippet to make the carousel scroll in a vertical direction

Now you just need to copy and paste the snippet below into your website. If you don’t know how to do it, please check this guide.

// set the settings into a vertical direction
add_filter( 'render_block', function( $block_content, $block, $wp_block ) {

	if( 'rudr/carousel' !== $block[ 'blockName' ] ) {
		return $block_content;
	}
	// check CSS class
	if( ! str_contains( $block_content, 'is-vertical-carousel' ) ) {
		return $block_content;
	}

	return str_replace( 'data-swiper="{', 'data-swiper="{"direction":"vertical",', $block_content );

}, 10, 3 );

// set a carousel height
add_action( 'wp_head', function() {

	// please provide a desired carousel height right here
	$carousel_height = '300px';

	echo "<style>.wp-block-rudr-carousel.is-vertical-carousel{height:{$carousel_height}}</style>";

} );

Probably you don’t need to change anything in this snippet, but:

Need more help?