The Carousel Challenge Solution6:09 with Dave McFarland
I'll show you how I solved the challenge from the last video.
How did it go? 0:00 Were you able to use the slick carousel yourself? 0:01 If not, all it takes is practice. 0:04 I'll show you how I did it and you can follow along in Workspaces. 0:06 Click the launch workspaces button to follow the workspace on this page. 0:10 if you tried to figure this out already, you'll see your workspace and 0:14 the files that you made changes to. 0:17 If you didn't try, you'll see what I have here. 0:20 An index.html file, that's the file I'll add the carousel to. 0:22 In the JS folder there's jQuery and a folder for the slick plug in. 0:27 I'll start by adding the CSS files to index.html file. 0:31 First I'll add the main slick CSS file. 0:36 This contains the styles required to control the placement of the slides on 0:46 the page, but it doesn't have much in the way of visual styling, so 0:50 I'll add the slick theme file, too 0:53 This file, as you saw in an earlier video, 1:01 has some pretty nice looking formatting for the various user interface elements. 1:03 Like the previous and next buttons and the dots used to navigate the carousel. 1:08 I also need to add jQuery to the page. 1:14 This goes at the bottom of the page, after the HTML in the page loads. 1:19 After the script tag, I'll link to the plugin. 1:25 Remember, since the plugin uses jQuery, 1:32 you need to put this link after the link to jQuery. 1:35 Now I need to add the slides to the page. 1:40 We start with the div. 1:43 This is the container for the slides. 1:44 This div represents the carousel. 1:48 And each div we add inside of it will be a single slide. 1:50 Now, I didn't make you create each div yourself. 1:54 You could, of course, if you wanted to. 1:56 But in the slides.html file I have all the HTML already completed. 1:58 There are twelve divs in here, one for each employee. 2:03 I'll just copy the HTML, and paste it inside the div I added just a moment ago. 2:07 Now we're almost there, but the carousel won't work until we call it. 2:15 First I'll add some script tags. 2:20 And inside that I'll add my code to call the plugin. 2:24 Now, I want to do a few modifications to this, for example, 2:31 I want to add the dots that let you control the navigation of the slides. 2:34 I'll do that by adding an object literal, with the dots property set to true. 2:39 Now as you'll recall, I also wanna see four slides at a time. 2:45 So let's look at the documentation for this plugin. 2:49 Now here are the settings. 2:53 And as I look through them I find one called slidesToShow and 2:56 another called slidesToScroll. 3:00 The slidesToShow setting determines how many slides to show at once. 3:04 The slidesToScroll setting determines how many slides will move at a time, 3:09 as I advance the carousel. 3:14 I'll go back to my HTML file, and add some settings. 3:16 Now I wanna show four slides at a time. 3:22 And I wanna move four of them each time the previous or 3:25 next button, or one of the navigation dots, is clicked. 3:28 I'll save the file and preview it. 3:31 This is looking really good, except those dots are too small and dark. 3:35 But I can use the developer's tools to see what CSS is involved in styling these. 3:40 Let's see, here is the slick, or .slick-dots li button:before style. 3:48 We saw that earlier in the section. 3:55 We just need to change its font size and color. 3:57 I'll do that now. 4:02 And go back to my workspaces and open the main.css file. 4:04 Now I don't want to add this style to the slick-theme.css file. 4:10 If, for example, a new version of the plugin comes out, I don't want to destroy 4:16 my styles by updating and replacing the old theme file with the updated version. 4:19 So I'll keep my new styles in the main.css file. 4:24 Okay, let's check it out. 4:28 Everything looks pretty good, except the color of the dot, 4:31 that indicates the current set of slides, it's too dark. 4:34 I'll use the dev tools again to figure out what I need to do. 4:38 Okay, see, here's a really long style name. 4:43 .slick-dots li.slick-active button:before. 4:47 Okay, let's see what happens if I change this black setting to white. 4:55 Perfect. 5:05 I'll just add a new style to the main .css file. 5:06 Now the highlighted dot will appear white, not dark gray, and be easier to see. 5:21 Let's check it out. 5:26 Okay, this looks great! 5:28 I hope you were able to add the plugin as well. 5:31 I encourage you to check out the documentation and test out other ideas for 5:33 adding this plugin to your websites. 5:37 We've reached the end of this course. 5:40 I hope you've learned how useful jQuery plugins can be. 5:42 Most are easy to use. 5:45 They also can add a lot of interactivity and visual flair to a site. 5:47 But best of all, jQuery plugins don't require you to spend hours and 5:51 hours to program the same solution yourself. 5:55 Now go and find more useful jQuery plugins. 5:59 If you find a really good one, make sure you post it to the forum so 6:01 other students at Treehouse can learn about it. 6:05 Good luck and have fun. 6:08
You need to sign up for Treehouse in order to download course files.Sign up