blocksy-posts-mobile-slider.php

<?php
// register the style selection for advanced posts block:
function register_block_styles() {
	if ( function_exists( 'register_block_style' ) ) {
		register_block_style(
			'blocksy/query',
			array(
				'name' => 'mobile-slider',
				'label' => __("mit Slider","lmdm") // change label to your needs
			)
		);
  }
}
add_action( "after_setup_theme", 'register_block_styles' );
// add css code for the block and also for the shortcode:
function load_slider_css(){
	wp_register_style("mobile-slider",false);
	wp_enqueue_style("mobile-slider");
	$slider_css = "
	@media(max-width:689.98px) and (hover: none){
            .woocommerce.columns-4 {
                width:100%;
            }
        
            .woocommerce.columns-4 .products:is(ul),
            .wp-block-blocksy-query.is-style-mobile-slider .entries,
            .ct-posts-shortcode.is-style-mobile-slider .entries {
                overflow: auto;
                display: flex;
                scroll-snap-type: x proximity;
                scroll-behavior: smooth;
            }
            .woocommerce.columns-4 .products:is(ul) [data-products=type-2] .product,
            .wp-block-blocksy-query.is-style-mobile-slider .entries > .entry-card,
            .ct-posts-shortcode.is-style-mobile-slider .entries > .entry-card {
                scroll-snap-align: center;
                flex:0 0 calc(66.66% - var(--grid-columns-gap, 30px) + var(--grid-columns-gap, 30px)/2);
            }
        }";
	wp_add_inline_style("mobile-slider",$slider_css);
}
add_action( 'wp_enqueue_scripts', 'load_slider_css' );