UIkit 框架 (html/css/js) 视频滑块创建答案

【问题标题】：UIkit framework (html/css/js) video slider creationUIkit 框架 (html/css/js) 视频滑块创建
【发布时间】：2015-07-05 04:22:26
【问题描述】：

我正在为我的网站使用 UIkit 框架，但我不知道如何制作视频滑块。我正在使用框架中的“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>

【问题讨论】：

试试把这个放到JSfiddle中

标签： javascript html css frameworks uikit

【解决方案1】：

在我看来，您缺少幻灯片中的 ID <div>。试试这个

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

重要的是要理解在JS中

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

实际上与<div id="yourEl" data-uk-slideshow="...> 相同。

【讨论】：

【解决方案2】：

我已将 http://getuikit.com/docs/slideshow.html 中的示例复制粘贴到工作 jsfiddle：https://jsfiddle.net/6d6pwrrz/

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

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

请记住：您需要为幻灯片和幻灯片导航 css & javascript 添加库。

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

在那里你可以找到比所提供的coden-ps更多的信息。

【讨论】：