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.

Write a reply

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