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

UIKit (getuikit) slider component refuses to work

本文关键字：组件 拒绝 工作 getuikit UIKit      更新时间：2023-09-26

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

我最初尝试拥有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

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

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

在线链接资源的完整工作示例：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>
相关文章：