1 00:00:00,390 --> 00:00:01,280 How did it go? 2 00:00:01,280 --> 00:00:04,410 Were you able to use the slick carousel yourself? 3 00:00:04,410 --> 00:00:06,660 If not, all it takes is practice. 4 00:00:06,660 --> 00:00:10,780 I'll show you how I did it and you can follow along in Workspaces. 5 00:00:10,780 --> 00:00:14,620 Click the launch workspaces button to follow the workspace on this page. 6 00:00:14,620 --> 00:00:17,820 if you tried to figure this out already, you'll see your workspace and 7 00:00:17,820 --> 00:00:20,100 the files that you made changes to. 8 00:00:20,100 --> 00:00:22,322 If you didn't try, you'll see what I have here. 9 00:00:22,322 --> 00:00:27,130 An index.html file, that's the file I'll add the carousel to. 10 00:00:27,130 --> 00:00:30,750 In the JS folder there's jQuery and a folder for the slick plug in. 11 00:00:31,960 --> 00:00:36,181 I'll start by adding the CSS files to index.html file. 12 00:00:36,181 --> 00:00:39,421 First I'll add the main slick CSS file. 13 00:00:46,261 --> 00:00:50,230 This contains the styles required to control the placement of the slides on 14 00:00:50,230 --> 00:00:53,821 the page, but it doesn't have much in the way of visual styling, so 15 00:00:53,821 --> 00:00:55,711 I'll add the slick theme file, too 16 00:01:01,511 --> 00:01:03,851 This file, as you saw in an earlier video, 17 00:01:03,851 --> 00:01:08,740 has some pretty nice looking formatting for the various user interface elements. 18 00:01:08,740 --> 00:01:12,860 Like the previous and next buttons and the dots used to navigate the carousel. 19 00:01:14,030 --> 00:01:15,781 I also need to add jQuery to the page. 20 00:01:19,171 --> 00:01:23,031 This goes at the bottom of the page, after the HTML in the page loads. 21 00:01:25,761 --> 00:01:28,641 After the script tag, I'll link to the plugin. 22 00:01:32,310 --> 00:01:35,608 Remember, since the plugin uses jQuery, 23 00:01:35,608 --> 00:01:39,460 you need to put this link after the link to jQuery. 24 00:01:40,680 --> 00:01:43,270 Now I need to add the slides to the page. 25 00:01:43,270 --> 00:01:44,780 We start with the div. 26 00:01:44,780 --> 00:01:46,540 This is the container for the slides. 27 00:01:48,650 --> 00:01:50,820 This div represents the carousel. 28 00:01:50,820 --> 00:01:54,600 And each div we add inside of it will be a single slide. 29 00:01:54,600 --> 00:01:56,750 Now, I didn't make you create each div yourself. 30 00:01:56,750 --> 00:01:58,640 You could, of course, if you wanted to. 31 00:01:58,640 --> 00:02:03,640 But in the slides.html file I have all the HTML already completed. 32 00:02:03,640 --> 00:02:06,070 There are twelve divs in here, one for each employee. 33 00:02:07,130 --> 00:02:13,190 I'll just copy the HTML, and paste it inside the div I added just a moment ago. 34 00:02:15,080 --> 00:02:18,790 Now we're almost there, but the carousel won't work until we call it. 35 00:02:20,390 --> 00:02:22,030 First I'll add some script tags. 36 00:02:24,850 --> 00:02:27,461 And inside that I'll add my code to call the plugin. 37 00:02:31,011 --> 00:02:34,362 Now, I want to do a few modifications to this, for example, 38 00:02:34,362 --> 00:02:39,000 I want to add the dots that let you control the navigation of the slides. 39 00:02:39,000 --> 00:02:42,710 I'll do that by adding an object literal, with the dots property set to true. 40 00:02:45,271 --> 00:02:49,660 Now as you'll recall, I also wanna see four slides at a time. 41 00:02:49,660 --> 00:02:51,591 So let's look at the documentation for this plugin. 42 00:02:53,445 --> 00:02:55,070 Now here are the settings. 43 00:02:56,180 --> 00:03:00,870 And as I look through them I find one called slidesToShow and 44 00:03:00,870 --> 00:03:02,955 another called slidesToScroll. 45 00:03:04,692 --> 00:03:08,610 The slidesToShow setting determines how many slides to show at once. 46 00:03:09,672 --> 00:03:14,120 The slidesToScroll setting determines how many slides will move at a time, 47 00:03:14,120 --> 00:03:16,220 as I advance the carousel. 48 00:03:16,220 --> 00:03:18,830 I'll go back to my HTML file, and add some settings. 49 00:03:22,161 --> 00:03:25,338 Now I wanna show four slides at a time. 50 00:03:25,338 --> 00:03:28,560 And I wanna move four of them each time the previous or 51 00:03:28,560 --> 00:03:31,305 next button, or one of the navigation dots, is clicked. 52 00:03:31,305 --> 00:03:35,631 I'll save the file and preview it. 53 00:03:35,631 --> 00:03:40,130 This is looking really good, except those dots are too small and dark. 54 00:03:40,130 --> 00:03:48,751 But I can use the developer's tools to see what CSS is involved in styling these. 55 00:03:48,751 --> 00:03:55,480 Let's see, here is the slick, or .slick-dots li button:before style. 56 00:03:55,480 --> 00:03:57,860 We saw that earlier in the section. 57 00:03:57,860 --> 00:04:00,475 We just need to change its font size and color. 58 00:04:02,140 --> 00:04:02,910 I'll do that now. 59 00:04:04,000 --> 00:04:07,190 And go back to my workspaces and open the main.css file. 60 00:04:10,770 --> 00:04:14,830 Now I don't want to add this style to the slick-theme.css file. 61 00:04:16,050 --> 00:04:19,680 If, for example, a new version of the plugin comes out, I don't want to destroy 62 00:04:19,680 --> 00:04:24,380 my styles by updating and replacing the old theme file with the updated version. 63 00:04:24,380 --> 00:04:28,140 So I'll keep my new styles in the main.css file. 64 00:04:28,140 --> 00:04:28,821 Okay, let's check it out. 65 00:04:31,160 --> 00:04:34,705 Everything looks pretty good, except the color of the dot, 66 00:04:34,705 --> 00:04:38,200 that indicates the current set of slides, it's too dark. 67 00:04:38,200 --> 00:04:40,321 I'll use the dev tools again to figure out what I need to do. 68 00:04:43,191 --> 00:04:47,315 Okay, see, here's a really long style name. 69 00:04:47,315 --> 00:04:55,280 .slick-dots li.slick-active button:before. 70 00:04:55,280 --> 00:04:59,020 Okay, let's see what happens if I change this black setting to white. 71 00:05:05,960 --> 00:05:06,930 Perfect. 72 00:05:06,930 --> 00:05:09,001 I'll just add a new style to the main .css file. 73 00:05:21,271 --> 00:05:26,370 Now the highlighted dot will appear white, not dark gray, and be easier to see. 74 00:05:26,370 --> 00:05:26,870 Let's check it out. 75 00:05:28,681 --> 00:05:31,550 Okay, this looks great! 76 00:05:31,550 --> 00:05:33,850 I hope you were able to add the plugin as well. 77 00:05:33,850 --> 00:05:37,800 I encourage you to check out the documentation and test out other ideas for 78 00:05:37,800 --> 00:05:40,650 adding this plugin to your websites. 79 00:05:40,650 --> 00:05:42,610 We've reached the end of this course. 80 00:05:42,610 --> 00:05:45,960 I hope you've learned how useful jQuery plugins can be. 81 00:05:45,960 --> 00:05:47,750 Most are easy to use. 82 00:05:47,750 --> 00:05:51,810 They also can add a lot of interactivity and visual flair to a site. 83 00:05:51,810 --> 00:05:55,710 But best of all, jQuery plugins don't require you to spend hours and 84 00:05:55,710 --> 00:05:59,300 hours to program the same solution yourself. 85 00:05:59,300 --> 00:06:01,850 Now go and find more useful jQuery plugins. 86 00:06:01,850 --> 00:06:05,240 If you find a really good one, make sure you post it to the forum so 87 00:06:05,240 --> 00:06:08,120 other students at Treehouse can learn about it. 88 00:06:08,120 --> 00:06:09,060 Good luck and have fun.