Question

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

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

整个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>

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

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

Answer 1

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

Answer 2

在线关联来源的完整工作示例：https://codepen.io/stanleyondrus/pen/wjgZyQ

 document.querySelector("#myForm").addEventListener("submit", e => {
    e.preventDefault()

    const radioValue = document.querySelector('input[name="rand"]:checked').value;

    switch(Number(radioValue)) {
      case 1: // do something
      default:
    }
 });

UIKit（getuikit）滑块组件拒绝工作

2 个答案: