UIKit (getuikit) 滑块组件拒绝工作

Question

我不知道 UI 套件的滑块组件发生了什么。我已经成功使用 UI 工具包几个月了（包括使用滑块），现在，在这个新网站上，它根本没有呈现（列表项显示为默认值，没有幻灯片功能等）。

我最初尝试使用 UIKit 和 Jquery 的本地副本，但结果相同。这也发生在我的本地主机服务器上（所以希望这个错误是一个愚蠢的错误）。

整个 php 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Burn Blue</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.3/css/uikit.min.css" />
        <link rel="stylesheet" href="css/components/slider.min.css" />
    </head>
    <body>
        <div data-uk-slider>

        <div class="uk-slider-container">
            <ul class="uk-slider">
                <li class="uk-width-1-1" style="background-image: url('/images/slide-1.jpg');">Test</li>
                <li class="uk-width-1-1" style="background-image: url('/images/slide-2.jpg');">Test</li>
                <li class="uk-width-1-1" style="background-image: url('/images/slide-3.jpg');">Test</li>
                <li class="uk-width-1-1" style="background-image: url('/images/slide-2.jpg');">Test</li>
            </ul>
        </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.3/js/uikit.min.js"></script>
        <script src="js/components/slider.min.js"></script>
    </body>
</html>

Link 到页面：http://burn.blue/slider.php

编辑：它现在工作正常；我没有意识到我必须添加 slider.min.js 或 slider.min.css.

Answer 1

Artefact 是正确的。我没有意识到，但是 UIKit 组件要求您调用它们各自的 js 和 css 文件。我已经更新了问题中的代码以显示工作示例。

Answer 2

带有在线链接源的完整工作示例：https://codepen.io/stanleyondrus/pen/wjgZyQ

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/components/slider.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/colors/3.0.0/css/colors.min.css"/>

    <style>
      .box {
        height: 125px;
        width: 150px;
        text-align: center;
        vertical-align: middle;
        line-height: 125px;     
        font-size: 40px;
      }

      a, a:hover, a:active, a:visited, a:focus {
        color: inherit;
        text-decoration:none; 
        cursor:pointer;  
      }
      </style>

    <div data-uk-slider="{center: true}">
      <div class="uk-slider-container">
          <ul class="uk-slider uk-grid-small">
            <li><a href="#"><div class="box bg-blue white">Box 1</div></a></li>
            <li><a href="#"><div class="box bg-teal white">Box 2</div></a></li>
            <li><a href="#"><div class="box bg-red white">Box 3</div></a></li>
            <li><a href="#"><div class="box bg-orange white">Box 4</div></a></li>
            <li><a href="#"><div class="box bg-navy white">Box 5</div></a></li>            
          </ul>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/components/slider.min.js"></script>

UIKit (getuikit) 滑块组件拒绝工作

UIKit (getuikit) slider component refuses to work

html

javascript

jquery

getuikit