2

我不知道这个 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>

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

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

4

2 回答 2

0

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

于 2016-01-24T18:34:08.457 回答
0

具有在线链接资源的完整工作示例：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>
于 2018-04-30T08:30:27.087 回答