CODEWITHSUNDEEP
javascripthtmlcssframeworksuikit
andynoir
andynoir

Reputation: 25

UIkit framework (html/css/js) video slider creation

I am using UIkit framework for my website and I can't figure out how to make a video slider. I am using "slidenav" and "slideshow" components from the framework, but nothing works. Here is my HTML

<div class="uk-slidenav-position" data-uk-slideshow>
    <ul class="uk-slideshow">

        <li>
            <iframe src="https://www.youtube.com/embed/WIVuAsKwDnQ?rel=0&amp;showinfo=0" frameborder="0"
                allowfullscreen></iframe>
        </li>

        <li>
            <iframe src="//player.vimeo.com/video/110284060? color=ffffff&byline=0&portrait=0" frameborder="0"
                webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </li>

    </ul>
    <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
    <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data- uk-slideshow-item="next"></a>
</div>

Upvotes: 1

Views: 1346

Answers (2)

Stxle
Stxle

Reputation: 99

Looks to me like you are missing the ID in your Slideshow <div>. Try this

<div id="mySlideshow" class="uk-slidenav-position" data-uk-slideshow>

Important to understand is that in JS 

var slideshow = UIkit.slideshow($('#yourEl'), {option:value})

is effectively the same as <div id="yourEl" data-uk-slideshow="...>.

Upvotes: 2

Wannes Vandamme
Wannes Vandamme

Reputation: 111

I've copy-pasted the example from the http://getuikit.com/docs/slideshow.html into a working jsfiddle: https://jsfiddle.net/6d6pwrrz/

I've added your links as a <li><iframe> You can experiment with this yourself further.

All styles are copypasted from the element on the getuikit website.

To keep in mind: you need to add the libraries for the slideshow and slidenav css & javascript.

If you want to see the working code on the getuikit.com website, i use the 'inspect element' function -right click in chrome- on the working examples.

There you can find more information than in the codesnippets provided.

Upvotes: 2

Related Questions