Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
The Carousel Challenge2: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.
Create a carousel with
- Previous and Next Buttons
- Navigation dots below the carousel
- Display 4 slides at a time
- Navigation advances 4 slides at a time
- Attach the Slick CSS files
- Add a div to hold the slides
- Add the 'slides' (copy the HTML from the slides.html file)
- Add the programming to call the plugin
- Change the look with CSS (larger dots and different colors)
Now it's time for you to practice using the Slick carousel plugin on your own.
I've included a couple of practice files in the workspace on this page.
You can also download them as part of the project files.
I want you to practice adding and configuring the carousel
in a couple of different situations using the Slick documentation for reference, and
your knowledge of jQuery plugins.
Let me show you what I want you to do.
Here's the final design I'd like you to create.
Notice that the carousel has previous and next buttons.
As well as little dots that let you navigate all the slides in the carousel.
The biggest change from what we've made from our previous use of the carousel is
that we're showing four slide or four divs at a time.
When you press the next button, the four slides currently visible
slide to the left, and four new slides enter on the right.
You'll need to look at the slick plugin's documentation to figure out
how to do that.
Here's a hint, look for the Slides To Show option.
Okay, so here's what you'll need to do.
First, attach the Slick CSS files.
All the files are in place in the workspace on this page.
You just need to hook them all up.
Second, attach jQuery and the Slick Plugin files.
Third, add a div to hold the slides.
Four, add the slides.
To make this simpler, I have a workspace for this challenge, and
have two files, the index.html file, where you'll add the carousel, and
a slides.html file, which contains the HTML for the slides.
Fifth, add the programming to call the plugin.
You'll need to look at the Slick Plugin documentation which I've linked to in
the teacher's notes to figure out how to display multiple slides at once.
Six, add new CSS.
You'll notice that the dots are larger than normal, and
that they're a different color than what's defined in the Slick themed CSS file.
You can use the Chrome Developer's Console to figure out how to do that.
Good luck, and in the next video I'll show you how I solved this challenge.
You need to sign up for Treehouse in order to download course files.Sign up