Bummer! This is just a preview. You need to be signed in with a Basic 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. 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