Question

我正在为我的网站使用UIkit框架，我无法弄清楚如何制作视频滑块。我正在使用＆＃34; slidenav＆＃34;和＆＃34;幻灯片＆＃34;框架中的组件，但没有任何作用。这是我的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＆amp;添加库。的JavaScript。

如果你想在getuikit.com网站上看到工作代码，我会使用＆＃39; inspect元素＆＃39; function -right点击工作示例中的chrome-。

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

UIkit框架（html / css / js）视频滑块创建

1 个答案: