Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Using jQuery Plugins

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Carousel Challenge

2:06 with Dave McFarland

Practice adding and configuring the carousel in a couple of different situations using the slick documentation for reference and your knowledge of jQuery plugins.

Challenge Description

Create a carousel with

  1. Previous and Next Buttons
  2. Navigation dots below the carousel
  3. Display 4 slides at a time
  4. Navigation advances 4 slides at a time

Challenge Tasks

  1. Attach the Slick CSS files
  2. Attach jQuery and the Slick Plugin JavaScript files
  3. Add a div to hold the slides
  4. Add the 'slides' (copy the HTML from the slides.html file)
  5. Add the programming to call the plugin
  6. Change the look with CSS (larger dots and different colors)

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Now it's time for you to practice using the Slick carousel plugin on your own. 0:00
    I've included a couple of practice files in the workspace on this page. 0:05
    You can also download them as part of the project files. 0:09
    I want you to practice adding and configuring the carousel 0:13
    in a couple of different situations using the Slick documentation for reference, and 0:16
    your knowledge of jQuery plugins. 0:20
    Let me show you what I want you to do. 0:23
    Here's the final design I'd like you to create. 0:25
    Notice that the carousel has previous and next buttons. 0:28
    As well as little dots that let you navigate all the slides in the carousel. 0:33
    The biggest change from what we've made from our previous use of the carousel is 0:38
    that we're showing four slide or four divs at a time. 0:42
    When you press the next button, the four slides currently visible 0:45
    slide to the left, and four new slides enter on the right. 0:49
    You'll need to look at the slick plugin's documentation to figure out 0:54
    how to do that. 0:57
    Here's a hint, look for the Slides To Show option. 0:59
    Okay, so here's what you'll need to do. 1:02
    First, attach the Slick CSS files. 1:05
    All the files are in place in the workspace on this page. 1:08
    You just need to hook them all up. 1:11
    Second, attach jQuery and the Slick Plugin files. 1:14
    Third, add a div to hold the slides. 1:18
    Four, add the slides. 1:21
    To make this simpler, I have a workspace for this challenge, and 1:23
    have two files, the index.html file, where you'll add the carousel, and 1:26
    a slides.html file, which contains the HTML for the slides. 1:30
    Fifth, add the programming to call the plugin. 1:36
    You'll need to look at the Slick Plugin documentation which I've linked to in 1:39
    the teacher's notes to figure out how to display multiple slides at once. 1:42
    Six, add new CSS. 1:48
    You'll notice that the dots are larger than normal, and 1:50
    that they're a different color than what's defined in the Slick themed CSS file. 1:52
    You can use the Chrome Developer's Console to figure out how to do that. 1:57
    Good luck, and in the next video I'll show you how I solved this challenge. 2:01

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up