Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author David Jensen

    (@dkjensen)

    Hello, no sorry this plugin is a block only. It could theoretically be possible but you would have to create the shortcode as this plugin does not provide one.

    Thread Starter Tierralandia

    (@tierralandia)

    Ok, I undestand
    And how do you think I could do that?

    Plugin Author David Jensen

    (@dkjensen)

    You would use something like serialize_blocks() passing in array, like this for example:

    $shortcode_content = serialize_blocks( array(
    'cloudcatch/splide-carousel',
    array(
    'interval' => 5000,
    'breakpointTablet' => 1079,
    'breakpointMobile' => 599,
    'extensions' => array(
    'autoScroll' => false,
    'urlHash' => false
    )
    ),
    array(
    array(
    'cloudcatch/splide-carousel-item',
    array(),
    array(
    array(
    'core/quote',
    array(),
    array(
    array(
    'core/paragraph',
    array(),
    array()
    ),

    )
    ),

    )
    ),
    array(
    'cloudcatch/splide-carousel-item',
    array(),
    array(
    array(
    'core/quote',
    array(),
    array(
    array(
    'core/paragraph',
    array(),
    array()
    ),

    )
    ),

    )
    ),
    array(
    'cloudcatch/splide-carousel-item',
    array(),
    array(
    array(
    'core/quote',
    array(),
    array(
    array(
    'core/paragraph',
    array(),
    array()
    ),

    )
    ),

    )
    ),

    )
    ) );

    Stick that in a shortcode using the add_shortcode() function.

    This is untested.

    It would be easier to create a new shortcode, enqueing Splide via CDN or other means, and returning shortcode content that follows the proper structure splide requires.

    Something like this:

    function enqueue_splide_assets() {
    // Enqueue Splide CSS and JS from CDN
    wp_enqueue_style( 'splide-core-css', 'https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css', array(), '4.0.7' );
    wp_enqueue_script( 'splide-js', 'https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js', array(), '4.0.7', true );
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_splide_assets' );

    function splide_carousel_shortcode() {
    ob_start();
    ?>
    <div id="splide-carousel" class="splide">
    <div class="splide__track">
    <ul class="splide__list">
    <li class="splide__slide">Slide 1</li>
    <li class="splide__slide">Slide 2</li>
    <li class="splide__slide">Slide 3</li>
    </ul>
    </div>
    </div>

    <script>
    document.addEventListener( 'DOMContentLoaded', function () {
    new Splide( '#splide-carousel', {
    type : 'loop',
    perPage: 3,
    autoplay: true,
    } ).mount();
    } );
    </script>
    <?php
    return ob_get_clean();
    }
    add_shortcode( 'splide_carousel', 'splide_carousel_shortcode' );
    Thread Starter Tierralandia

    (@tierralandia)

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Shortcode?’ is closed to new replies.