javascript - UIkit 框架 (html/css/js) 视频 slider 创建

Question

我正在为我的网站使用 UIkit 框架，但我不知道如何制作视频 slider 。我正在使用框架中的“slidenav”和“slideshow”组件，但没有任何效果。这是我的 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>

Answer 1

我已经从 http://getuikit.com/docs/slideshow.html 中复制粘贴了示例进入工作的jsfiddle:https://jsfiddle.net/6d6pwrrz/

我已将您的链接添加为 <li><iframe>您可以自己进一步试验。

所有样式都是从 getuikit 网站上的元素复制粘贴的。

请记住:您需要为幻灯片和 slidenav css & javascript 添加库。

如果您想在 getuikit.com 网站上查看工作代码，我使用“检查元素”功能 - 在 chrome 中右键单击 - 在工作示例上。

在那里你可以找到比提供的代码片段更多的信息。