Activating UIkit Slideshow

I added the following code in "functions.php", but I could not get the "UIkit slideshow" to work. Nothing is working like no javascript is activated. What am I doing wrong? I have tested "UIkit slider" from the component and it seemed to work.

To add slideshow from UIkit component:

add_action( 'beans_uikit_enqueue_scripts', 'beans_child_enqueue_uikit_assets' );
function beans_child_enqueue_uikit_assets() {
    // Add UIkit componetns:
    beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );
    beans_uikit_enqueue_components( array( 'flex', 'overlay' ) );
    beans_uikit_enqueue_components( array( 'tooltip', 'slider', 'slideshow', 'slidenav', 'sticky', 'dotnav' ), 'add-ons' );

To add slideshow on front page *using Advanced Custom Field to get the slider images

add_action( 'beans_header_after_markup', 'gs_display_heroarea' );
function gs_display_heroarea() {
    if ( is_front_page() ) {
    <div class="uk-container uk-container-center">
        <div class="uk-slideshow uk-position-relative uk-visible-toggle uk-light" uk-slideshow>
            <ul class="uk-slideshow-items" data-uk-slideshow>
            <?php if( have_rows('slider') ): ?>
                <?php while( have_rows('slider') ): the_row(); ?>
                <li class="">
                    <img class="uk-cover" src="<?php the_sub_field('slider_image'); ?>" alt="" uk-cover>
                <?php endwhile; ?>
            <?php endif; ?>

            <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>


    <?php } 


I am so stuck on this and can't get myself out of this. Please help!!! btw thank you very much for developing such awsome framework.

Edited 2 weeks, 1 day ago by Hideto

Write a reply

Login or register to write a reply, it's free!