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! While you're at it, check out some resources Treehouse students have shared here.

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

HTML

Ben Hall
Ben Hall
6,656 Points
Posted by Ben Hall
Ben Hall
6,656 Points

Trouble with Slick slider not working

I am having trouble getting the Ken Wheeler slick slider to work in my project, I have tried everything to get it working to no avail.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Soda</title>

        <!-- GOOGLE FONTS -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">

        <!-- BOOTSTRAP CDN -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- APP.CSS COMPILED FROM APP.SASS-->
    <link rel="stylesheet" href="app.css">

        <!-- SLICK SLIDER -->
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

  </head>
  <body>

        <!-- MAIN HEADER SECTION -->
        <header id="section-one">

            <!--  WRAPPER FOR SOCIAL ICONS -->
            <div id="social">
                <div class="icon" id="facebook"><a href="https://www.facebook.com/sodavisual"><img src="img/facebook.png" alt="facebook"></a></div>
                <div class="icon" id="twitter"><a href="https://twitter.com/sodavisual"><img src="img/twitter.png" alt="twitter"></a></div>
                <div class="icon" id="instagram"><a href="https://www.instagram.com/sodavisualuk/"><img src="img/instagram.png" alt="instagram"></a></div>
            </div>

            <!-- WRAPPER FOR MAIN CALL OUT -->
            <div class="container" id="main">
                <div>
                    <img id="logo" src="img/logo_soda.png" alt="logo">
                </div>
                <div class="col-md-8 col-md-offset-2">
                    <h1>PUSHING BOUNDRIES,<br> REALISING IDEAS.</h1>
                </div>
            </div>

        </header>
        <!-- END OF MAIN CALL OUT -->

        <!-- ABOUT SECTION -->
        <div class="container" id="section-two">
            <div class="col-md-4" id="about">
                <h2 class="col-md-10">A LITTLE BIT ABOUT OUR COMPANY</h2>
            </div>

            <div class="col-md-8" id="about-text">
                <p>SODA Visual is an agency with years of experience in Creative Commercial Photography. Whether you're creating a campaign from scratch or want to give your existing campaign an extra creative touch, we have the tools and the skill to make things happen.
                <br><br>
                Paul &#38; Romain are 2 professional photographers who work alongside you and your team to help you create and launch new products and strengthen your brand.
                <br><br>
                We help clients bring concepts and ideas to life with stills and video work and lots of other cool stuff ' We try and bring a little bit og our personalities into every job we do, and we think that's what makes us a little different.
                <br><br>
                We try not to bark orders, but know when to step in, and the open collaborative approach we bring to each job ensures we meet the</p>
            </div>
        </div>
        <!-- END OF ABOUT SECTION -->

        <!-- GALLERY SECTION -->
        <div class="container-fluid" id="section-three">
            <div class="container">
                <h1>OUR CLIENTS</h1>

                <div id="gallery" class="responsive">
                    <!-- gallery -->
                    <div class="boxes"><img src="img/logo_grand.png" alt="grand"></div>
                    <div class="boxes"><img src="img/logo_kings.png" alt="kings"></div>
                    <div class="boxes"><img src="img/logo_peldonrose.png" alt="peldon rose"></div>
                    <div class="boxes"><img src="img/logo_studio.png" alt="studio"></div>
                    <div class="boxes"><img src="img/logo_barclays.png" alt="barclays"></div>
                    <div class="boxes"><img src="img/logo_ministry.png" alt="ministry of sound"></div>
                    <div class="boxes"><img src="img/logo_freeview.png" alt="freeview"></div>
                    <div class="boxes"><img src="img/logo_sony.png" alt="sony"></div>
                </div>

            </div>
        </div>
        <!-- END OF GALLERY SECTION -->

        <!-- CONTACT SECTION -->
        <div class="container" id="section-four">
            <div class="col-md-7" id="contact-text">
                <h1>CONTACT SODA VISUAL</h1>

                <p class="lead">Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
                <br><br>
                <strong>Paul:</strong> +44 (0)794 921 2037
                <br><br>
                <strong>Romain:</strong> +44 (0)794 921 2037
                <br><br>
                <strong>EMAIL:</strong> info@soda-visual.com
                </p>
            </div>

            <!-- CONTACT FORM -->
            <div class="col-md-4 col-md-offset-1" id="contact-form">
                <form action="/action_page.php">
                  <input type="text" name="email" placeholder="EMAIL ADDRESS">
                  <input type="text" name="name" placeholder="NAME">
                    <textarea id="message" rows="8" cols="35" placeholder="MESSAGE"></textarea>
                  <input type="submit" value="SUBMIT">
                </form>
            </div>
        </div>
        <!-- END OF CONTACT SECTION -->

        <!-- FOOTER SECTION -->
        <footer class="container-fluid">
            <div class="container" id="footer-wrapper">
                <p class="lead" id="copyright">Copyright Soda Visual &#9400;</p>
                <p class="lead" id="terms">Terms &#38; Conditions</p>
            </div>
        </footer>
        <!-- END OF FOOTER SECTION -->








    <!-- JQUERY CDN FOR BOOTSTRAP INCLUSION -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- SLICK SLIDER JS -->
    <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" src="slick/slick.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.responsive').slick({
                  dots: true,
                  infinite: false,
                  speed: 300,
                  slidesToShow: 4,
                  slidesToScroll: 4,
                  responsive: [
                    {
                      breakpoint: 1024,
                      settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: true,
                        dots: true
                      }
                    },
                    {
                      breakpoint: 600,
                      settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                      }
                    },
                    {
                      breakpoint: 480,
                      settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                      }
                    }
                    // You can unslick at a given breakpoint now by adding:
                    // settings: "unslick"
                    // instead of a settings object
                  ]
                });
        });
    </script>

  </body>
</html>

Moderator edited: Added markdown so the code will render properly in the forums. -JN :sparkles:

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:
Or watch this video on code formatting.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I took the liberty of adding some markdown to your code so that it's more easily readable. But if you have a moment, take a look at the resources mentioned by Steven Parker to learn how to do this! :sparkles:

2 Answers

Ezra Siton
Ezra Siton
12,644 Points
Ezra Siton
Ezra Siton
12,644 Points

Correct answer (mark this) - but again learn from this issue (take the Workshop above) - you must learn how-to check for errors in the browser.

This is your error :

Failed to load resource: net::ERR_FILE_NOT_FOUND

https://stackoverflow.com/questions/32405812/failed-to-load-resource-neterr-file-not-found-loading-json-js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Soda</title>

        <!-- GOOGLE FONTS -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">

        <!-- BOOTSTRAP CDN -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- APP.CSS COMPILED FROM APP.SASS-->
    <link rel="stylesheet" href="app.css">

        <!-- SLICK SLIDER -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css"/>

  </head>
  <body>

        <!-- MAIN HEADER SECTION -->
        <header id="section-one">

            <!--  WRAPPER FOR SOCIAL ICONS -->
            <div id="social">
                <div class="icon" id="facebook"><a href="https://www.facebook.com/sodavisual"><img src="img/facebook.png" alt="facebook"></a></div>
                <div class="icon" id="twitter"><a href="https://twitter.com/sodavisual"><img src="img/twitter.png" alt="twitter"></a></div>
                <div class="icon" id="instagram"><a href="https://www.instagram.com/sodavisualuk/"><img src="img/instagram.png" alt="instagram"></a></div>
            </div>

            <!-- WRAPPER FOR MAIN CALL OUT -->
            <div class="container" id="main">
                <div>
                    <img id="logo" src="img/logo_soda.png" alt="logo">
                </div>
                <div class="col-md-8 col-md-offset-2">
                    <h1>PUSHING BOUNDRIES,<br> REALISING IDEAS.</h1>
                </div>
            </div>

        </header>
        <!-- END OF MAIN CALL OUT -->

        <!-- ABOUT SECTION -->
        <div class="container" id="section-two">
            <div class="col-md-4" id="about">
                <h2 class="col-md-10">A LITTLE BIT ABOUT OUR COMPANY</h2>
            </div>

            <div class="col-md-8" id="about-text">
                <p>SODA Visual is an agency with years of experience in Creative Commercial Photography. Whether you're creating a campaign from scratch or want to give your existing campaign an extra creative touch, we have the tools and the skill to make things happen.
                <br><br>
                Paul &#38; Romain are 2 professional photographers who work alongside you and your team to help you create and launch new products and strengthen your brand.
                <br><br>
                We help clients bring concepts and ideas to life with stills and video work and lots of other cool stuff ' We try and bring a little bit og our personalities into every job we do, and we think that's what makes us a little different.
                <br><br>
                We try not to bark orders, but know when to step in, and the open collaborative approach we bring to each job ensures we meet the</p>
            </div>
        </div>
        <!-- END OF ABOUT SECTION -->

        <!-- GALLERY SECTION -->
        <div class="container-fluid" id="section-three">
            <div class="container">
                <h1>OUR CLIENTS</h1>

                <div id="gallery" class="responsive">
                    <!-- gallery -->
                    <div class="boxes"><img src="img/logo_grand.png" alt="grand"></div>
                    <div class="boxes"><img src="img/logo_kings.png" alt="kings"></div>
                    <div class="boxes"><img src="img/logo_peldonrose.png" alt="peldon rose"></div>
                    <div class="boxes"><img src="img/logo_studio.png" alt="studio"></div>
                    <div class="boxes"><img src="img/logo_barclays.png" alt="barclays"></div>
                    <div class="boxes"><img src="img/logo_ministry.png" alt="ministry of sound"></div>
                    <div class="boxes"><img src="img/logo_freeview.png" alt="freeview"></div>
                    <div class="boxes"><img src="img/logo_sony.png" alt="sony"></div>
                </div>

            </div>
        </div>
        <!-- END OF GALLERY SECTION -->

        <!-- CONTACT SECTION -->
        <div class="container" id="section-four">
            <div class="col-md-7" id="contact-text">
                <h1>CONTACT SODA VISUAL</h1>

                <p class="lead">Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
                <br><br>
                <strong>Paul:</strong> +44 (0)794 921 2037
                <br><br>
                <strong>Romain:</strong> +44 (0)794 921 2037
                <br><br>
                <strong>EMAIL:</strong> info@soda-visual.com
                </p>
            </div>

            <!-- CONTACT FORM -->
            <div class="col-md-4 col-md-offset-1" id="contact-form">
                <form action="/action_page.php">
                  <input type="text" name="email" placeholder="EMAIL ADDRESS">
                  <input type="text" name="name" placeholder="NAME">
                    <textarea id="message" rows="8" cols="35" placeholder="MESSAGE"></textarea>
                  <input type="submit" value="SUBMIT">
                </form>
            </div>
        </div>
        <!-- END OF CONTACT SECTION -->

        <!-- FOOTER SECTION -->
        <footer class="container-fluid">
            <div class="container" id="footer-wrapper">
                <p class="lead" id="copyright">Copyright Soda Visual &#9400;</p>
                <p class="lead" id="terms">Terms &#38; Conditions</p>
            </div>
        </footer>
        <!-- END OF FOOTER SECTION -->








    <!-- JQUERY CDN FOR BOOTSTRAP INCLUSION -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- SLICK SLIDER JS -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.responsive').slick({
                  dots: true,
                  infinite: false,
                  speed: 300,
                  slidesToShow: 4,
                  slidesToScroll: 4,
                  responsive: [
                    {
                      breakpoint: 1024,
                      settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: true,
                        dots: true
                      }
                    },
                    {
                      breakpoint: 600,
                      settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                      }
                    },
                    {
                      breakpoint: 480,
                      settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                      }
                    }
                    // You can unslick at a given breakpoint now by adding:
                    // settings: "unslick"
                    // instead of a settings object
                  ]
                });
        });
    </script>

  </body>
</html>
Ezra Siton
Ezra Siton
12,644 Points
Ezra Siton
Ezra Siton
12,644 Points

In the future its hard to know "why" only by Code!! Add Codepen

Your Cdn is broken you should add:

https://

Recommended Workshop: https://teamtreehouse.com/library/debugging-javascript-in-the-browser

Example code (works well):

<html>
  <head>
  <title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({

      });
    });
  </script>

  </body>
</html>