Menu icon Foundation
Slick slider - why it's not working?

Hi,
i have some silly problem. I want to try how the slick slider works so I've made some simple page for test, opened my page in browser and there was nothing (besides some sample txt). Where I made a mistake?

            <html>
    <head>
    <title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
 
    </head>
    <body>

    <div class="single-item">
        <div>your content1</div>
        <div>your content2</div>
        <div>your content3</div>
    </div>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.single-item').slick();
        });
    </script>

    </body>
</html>

         

Slick Slider

Hi,
i have some silly problem. I want to try how the slick slider works so I've made some simple page for test, opened my page in browser and there was nothing (besides some sample txt). Where I made a mistake?

            <html>
    <head>
    <title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
 
    </head>
    <body>

    <div class="single-item">
        <div>your content1</div>
        <div>your content2</div>
        <div>your content3</div>
    </div>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.single-item').slick();
        });
    </script>

    </body>
</html>

         

This post has been closed. No new replies can be added.

Rafi Benkual almost 5 years ago

Is there any reason you are loading the JS in the head? Try moving into the body.

Here is an example of it working with Foundation. http://codepen.io/asif999/pen/ceLuv Your HTML looks ok.

jan kowalski almost 5 years ago

I just wanted to test if anything else happened if I put script into the header. Unfortunately it's not working. Moving into the body also.

I also copied all stuff from the link you sent me but nothing change.

For me it's look like scripts and css files aren't loaded but I checked url's and it's look right.

jan kowalski almost 5 years ago

Ok - problem solved:

I load jquery before loading slick and everything works:)