Support » Developing with WordPress » How to use slick or owl carousel with in block editor when using server render ?

  • farooktransvelo

    (@farooktransvelo)


    I created a Gutenberg block which uses slick carousel, i am using $(.element).slick(); to trigger slick with in a script.js file and enqueued both script.js and slick.js in frontend. It works fine on frontend(https://drive.google.com/file/d/1LVFkQnwKCZAifkmqw1LdsI2AxyM-coap/view).

    For editor i enqueued the both files(script.js and slick.js) with in “enqueue_block_editor_assets” however in editor it does not work(https://drive.google.com/file/d/1Flpb2_DVGvp_3i19QYPRkHh4-ZeAyYtA/view). Is there any approach to use slick or owl carousel with in editor(when using server render) ?

    This is code used for server render function.

    
    if ( ! function_exists( 'my_custom_image_slider' ) ) {
        function my_custom_image_slider( $atts = array() ) {
            ob_start();
            ?>
            <div class="slider slider-single-item">
                <div>
                    <img src="https://via.placeholder.com/600?text=1">
                </div>
                <div>
                    <img src="https://via.placeholder.com/600?text=2">
                </div>
                <div>
                    <img src="https://via.placeholder.com/600?text=3">
                </div>
                <div>
                    <img src="https://via.placeholder.com/600?text=4">
                </div>
                <div>
                    <img src="https://via.placeholder.com/600?text=5">
                </div>
                <div>
                    <img src="https://via.placeholder.com/600?text=6">
                </div>
            </div>
            <?php
            return ob_get_clean();
        }
    }
    

    In script.js,

    
    jQuery(document).ready( function($){
        $('.slider-single-item').slick();
    } );
    

    Regards

Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.