2

I have no idea what is going on with this slider component for UI kit. I've used UI kit successfully for months (including using the slider) and now, on this new site, it isn't rendering at all (list items showing up as default, no slide functionality, etc.).

I originally tried having local copies of UIKit and Jquery, but it was the same result. This occurs on my localhost server as well (so hopefully the error is a stupid mistake).

Entire php file:

<!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 to page: http://burn.blue/slider.php

EDIT: It's now working correctly; I didn't realize I had to add the slider.min.js or slider.min.css.

EmilyH
  • 90
  • 1
  • 9
  • Your image paths are returning a 404. – mark_c Jan 24 '16 at 07:05
  • Corrected them. Still occurring. No slide functionality and list items are default. I am mostly positive I am including all the necessary css/js to render a basic slider. – EmilyH Jan 24 '16 at 07:41
  • Try moving your scripts to the foot of the body. They're probably trying to initialize before the DOM is ready. – mark_c Jan 24 '16 at 08:10
  • No dice. Check the updated code. The slider is still failing to load or render at all. – EmilyH Jan 24 '16 at 08:18
  • 1
    You should load slider.js and slider.css – Greg Jan 24 '16 at 10:58
  • Now it's working (I added slider.min.js and slider.min.css). That's really odd, though. I was under the impression that as long as the js and css files were in their respective components directory, you only had to load the uikit.min.js and uikit.min.css files along with jQuery... – EmilyH Jan 24 '16 at 18:28

2 Answers2

0

Artefact was correct. I didn't realize it, but the UIKit components require you to call their respective js and css files. I've updated the code in my question to show the working example.

EmilyH
  • 90
  • 1
  • 9
0

Fully working example with online linked sources: 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>
st4n13y
  • 99
  • 1
  • 3