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>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
<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>
</div>
</div>
<?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.
Solved: UIkit was version 2 in Beans (Apr 4,2018). I was looking at UIkit 3. Sorry to bother you. The correct docs that I should have read was the following url: https://getuikit.com/v2/docs/slideshow.html