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

JavaScript

Posted by mfod
mfod
1,708 Points

Does anyone know how to create a simple javascript carousel? Has anyone ever used Slick?

I'm trying to create a simple carousel with images using slick, but its not working. I have all the necessary files. The html seems to be correct as well, but it only displays images.

2 Answers

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

There's a whole treehouse course on it: https://teamtreehouse.com/library/using-jquery-plugins/using-a-jquery-carousel/what-is-a-carousel .

I just finished the course, let me know if you want more help.

EDIT: I don't know why the link doesn't seem to be working now that I'm clicking it. I just copied and pasted it. But I got there by following the Full Stack Javascript track, it's under Using JQuery Plugins, and then the last unit "Using a jQuery Carousel".

Luke Pettway
Luke Pettway
16,593 Points

I edited your link. There is a bug I reported to TT where when a link is posted if there is a space after it, it encodes the carriage return. For now if you put a period after the space, it should be ok.

Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

Thanks.

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points 
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8"/>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick-theme.css"/>
    <style>
    body{
        background:royalblue;
    }
    .slider{
        width:600px;
        margin:20px auto;
        text-align:center;
    }
    h3{
        padding:40px 20px;
        background:white;
    }
    .slider div{
        margin-right:5px;
    }
    </style>
  </head>
  <body>

  <div class="slider">

    <div><h3>Insert Pictures in here</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
    <div><h3>8</h3></div>
    <div><h3>9</h3></div>
  </div>

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

  <script type="text/javascript">
    $(document).ready(function(){
        $('.slider').slick({
            dots: true,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });
    });
  </script>

  </body>
</html>