Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Stephen Blank
Stephen Blank
16,286 Points
Posted by Stephen Blank
Stephen Blank
16,286 Points

Can't get Slick Carousel to work

I'm trying to follow the instructions on the Github page. Just testing with a simple example, but can't seem to get it working.

https://github.com/kenwheeler/slick

Can anyone see any issues with the below code:

<html>
    <head>
    <title>My Now Amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
    </head>
    <body>

    <div class="your-class">
        <div><p>test1</p></div>
        <div><p>test2</p></div>
        <div><p>test3</p></div>
    </div>

    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.your-class').slick();
        });
    </script>

    </body>
</html>

2 Answers

Stephen Blank
Stephen Blank
16,286 Points
Stephen Blank
Stephen Blank
16,286 Points

The problem was that I was running from a file, so the url scheme for the script links was file: instead of http:

Changed // to http:// and it works fine.

Stephen O'Connor
Stephen O'Connor
22,291 Points
Stephen O'Connor
Stephen O'Connor
22,291 Points

Have you added a link to jQuery somewhere on your page? Slick won't work without jQuery.

Stephen Blank
Stephen Blank
16,286 Points
Stephen Blank
Stephen Blank
16,286 Points

I added jquery, but it still seems to be broken. Any other ideas?

<html>
    <head>
    <title>My Now Amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
    </head>
    <body style="background-color: lightblue">

    <div class="your-class">
        <div><p>test1</p></div>
        <div><p>test2</p></div>
        <div><p>test3</p></div>
    </div>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.your-class').slick();
        });
    </script>

    </body>
</html>