Hi! At the moment there isn’t demand for this feature so it will not be available in order to keep the carousel simple. However, we may introduce a feature in the future that allows developers to extend the runtime behavior, which would make this possible.
Thanks @virgildia. Would you be open to me making a code change and raising a PR?
@stevegreenslade my recommendation is to use PHP filters to randomize the slides. Add something like this to your theme’s custom PHP:
add_filter( 'render_block_data', 'randomize_carousel_inner_blocks', 10, 1 );
function randomize_carousel_inner_blocks( $parsed_block ) {
if ( is_admin() || wp_is_json_request() ) {
return $parsed_block;
}
if ( 'cb/carousel-v2' !== ( $parsed_block['blockName'] ?? '' ) ) {
return $parsed_block;
}
if ( ! empty( $parsed_block['innerBlocks'] ) ) {
shuffle( $parsed_block['innerBlocks'] );
}
return $parsed_block;
}
This will randomizes the order of InnerBlocks (slides) inside the carousel block when the page is rendered.
Hi,
Many thanks for the suggestion…. that set me thinking of ways to change the start postion without changing the plugin.
I’ve come up with 2 options:
PHP – Add to your themes functions.php file
This method works ok, and is all done on the server, so is quick. The downside is that if you have a cache plugin then the same order is shown to all users untile the cache expires.
function carousel_random_start( $parsed_block ) {
if ( is_admin() || wp_is_json_request() ) {
return $parsed_block;
}
$supported_blocks = [ 'cb/carousel-v2', 'cb/carousel' ];
if ( ! in_array( $parsed_block['blockName'] ?? '', $supported_blocks, true ) ) {
return $parsed_block;
}
if ( ! empty( $parsed_block['innerBlocks'] ) ) {
$count = count( $parsed_block['innerBlocks'] );
$offset = rand( 0, $count - 1 );
$parsed_block['innerBlocks'] = array_merge(
array_slice( $parsed_block['innerBlocks'], $offset ),
array_slice( $parsed_block['innerBlocks'], 0, $offset )
);
}
return $parsed_block;
}
add_filter( 'render_block_data', 'carousel_random_start' );
JavaScript – Add to the footer.
This version is better as in runs in the browser, when the footer is rendered so every visitor should see a different random first slide.
function carousel_random_start() {
?>
<script>
(function () {
// v2 (Swiper): rotate slides inside .swiper-wrapper
document.querySelectorAll('.cb-carousel-block .swiper-wrapper').forEach(function (wrapper) {
var slides = wrapper.children.length;
if (slides > 1) {
var offset = Math.floor(Math.random() * slides);
for (var i = 0; i < offset; i++) {
wrapper.appendChild(wrapper.firstElementChild);
}
}
});
// v1 (Slick): rotate direct children of the [data-slick] div
document.querySelectorAll('.wp-block-cb-carousel[data-slick]').forEach(function (wrapper) {
var slides = wrapper.children.length;
if (slides > 1) {
var offset = Math.floor(Math.random() * slides);
for (var i = 0; i < offset; i++) {
wrapper.appendChild(wrapper.firstElementChild);
}
}
});
}());
</script>
<?php
}
add_action( 'wp_footer', 'carousel_random_start' );
For my site, I turned this into a very simple plugin that can be install / enabled and disabled easily.
