Uikit slider javascript initialization

Question

I'm a newbie in JS and need to initialize UIKit's Slider component with var slider = UIkit.slider(element, { /* options */ }); as mentioned in the docs. So in my.js file I entered

$(document).ready(function(){
slider = UIkit.slider(element, {auto: true });

});

and in my.html

<div class="uk-slidenav-position" data-uk-slider>
<div class="uk-slider-container">
    <ul class="uk-slider uk-grid-width-medium-1-2">
        <li><img src="one.jpeg"></li>

        <li><img src="two.jpeg"></li>
    </ul>
</div>
<a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
<a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>

But no slider appears?

score 0 · Answer 1 · answered Dec 01 '16 at 13:32

I think probably the problem here is that you may not have included the uikit slider.js, slider.css and slidenav.css files. Also you need to replace 'element' in UIkit.slider with '#the id of the data-uk-slider div'.

I came across this question when trying to dynamically initialise the content of a slider from Javascript and couldn't find any documentation.

So for the record, the answer to that question is to create the slider within Javascript and then to add the line:

var slider = UIKit.slider('#id of the data-uk-slider-div', {options});

Where 'options' are e.g. auto: true

This is in the UIKit documentation but it took me a while.

Uikit slider javascript initialization

1 Answers1