文章/答案/技术大牛

发布

社区首页 >问答首页 >UIKit (getuikit)滑块组件拒绝工作

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

Stack Overflow用户

提问于 2016-01-24 06:21:07

回答 2查看 4.7K关注 0票数 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。

javascript

jquery

html

getuikit

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-01-24 18:34:08

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

票数 0

Stack Overflow用户

发布于 2018-04-30 08:30:27

完全使用联机链接的示例：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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34972860

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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