1 00:00:00,181 --> 00:00:03,641 Slick follows the familiar jQuery plugin pattern. 2 00:00:03,641 --> 00:00:08,167 Add a CSS file, some JS files and structure HTML in a certain way, 3 00:00:08,167 --> 00:00:11,722 then you select a page element and call the plugin. 4 00:00:11,722 --> 00:00:16,207 In the case of slick, the most challenging part is simply adding the HTML that 5 00:00:16,207 --> 00:00:19,661 makes up the carousel and even that isn't very difficult. 6 00:00:19,661 --> 00:00:21,961 Let me show you how. 7 00:00:21,961 --> 00:00:24,701 Let's add the carousel plugin to the home page. 8 00:00:24,701 --> 00:00:28,742 The most time consuming part of this is adding the HTML for the plugin. 9 00:00:28,742 --> 00:00:30,262 Now remember, the basic pattern. 10 00:00:30,262 --> 00:00:33,250 First, we add CSS and JavaScript files. 11 00:00:33,250 --> 00:00:35,962 Secondly, we structure HTML for the plugin. 12 00:00:35,962 --> 00:00:38,043 Third, we call the plugin. 13 00:00:38,043 --> 00:00:41,820 If you'd like to follow along, launch the workspace on this page or download 14 00:00:41,820 --> 00:00:45,671 the project files for this course and follow along using your own text editor. 15 00:00:45,671 --> 00:00:51,520 You'll see inside the js folder, a new folder for the slick plugin. 16 00:00:51,520 --> 00:00:55,510 Inside there are some CSS files, JavaScript files and a fonts folder. 17 00:00:56,680 --> 00:01:00,954 There are several CSS files, including a couple of .scss files. 18 00:01:00,954 --> 00:01:04,592 Now those are Sass files and are used to generate CSS. 19 00:01:04,592 --> 00:01:07,419 You don't need to know Sass in order to use this plugin, 20 00:01:07,419 --> 00:01:11,751 but if you wanna learn more about creating CSS using Sass, see the Teacher's Note for 21 00:01:11,751 --> 00:01:13,700 links to Treehouse courses about it. 22 00:01:15,870 --> 00:01:18,380 In addition, there are two JavaScript files. 23 00:01:18,380 --> 00:01:23,020 You want to use the .min or minified version, because it's smaller. 24 00:01:23,020 --> 00:01:26,350 But if you wanna look at the actual programming that makes up the slick 25 00:01:26,350 --> 00:01:29,430 plugin, open the slick.js file. 26 00:01:29,430 --> 00:01:32,072 As you can see, there's a lot of code in here. 27 00:01:32,072 --> 00:01:35,591 Let's start by adding a link to the style sheet. 28 00:01:35,591 --> 00:01:40,128 Open the index.html file and above the link to the main.css file, 29 00:01:40,128 --> 00:01:41,411 add another link. 30 00:01:46,111 --> 00:01:50,773 We add this link before the main.css file, because as you'll see later, 31 00:01:50,773 --> 00:01:55,812 we're going to modify the main.css file to tweak the appearance of our plugin. 32 00:01:58,131 --> 00:02:00,211 Next, we link to the JavaScript file. 33 00:02:00,211 --> 00:02:01,731 That goes at the bottom of the page. 34 00:02:05,131 --> 00:02:09,490 Remember that a plugin's JavaScript file must load after the jQuery file. 35 00:02:10,890 --> 00:02:13,600 A carousel is a way of displaying a series of div 36 00:02:13,600 --> 00:02:15,750 tags as individual slides on the page. 37 00:02:17,718 --> 00:02:22,257 The slick plugin needs your HTML to be structured in a particular way for 38 00:02:22,257 --> 00:02:23,023 it to work. 39 00:02:23,023 --> 00:02:26,082 First, you must create a div tag to hold your slides. 40 00:02:28,982 --> 00:02:34,148 I've added a class name here, so that it's easy to select this div and 41 00:02:34,148 --> 00:02:38,282 apply the plugin to it, then you add div tags inside it. 42 00:02:38,282 --> 00:02:39,103 For example. 43 00:02:42,143 --> 00:02:46,162 Now each div will represent one slide in the final design, I'll add another. 44 00:02:48,823 --> 00:02:51,063 And one last div. 45 00:02:54,612 --> 00:02:57,672 I'm keeping the code very simple to start, just so 46 00:02:57,672 --> 00:03:01,452 you can see how little you need to do to get this effect working. 47 00:03:01,452 --> 00:03:03,289 However, when using this plugin, 48 00:03:03,289 --> 00:03:06,732 you'd fill each of these divs with whatever content you'd like. 49 00:03:06,732 --> 00:03:08,782 It might be a photograph or a headline and 50 00:03:08,782 --> 00:03:12,450 some text, describing a new product your company offers. 51 00:03:12,450 --> 00:03:16,791 The div can hold links, bulleted lists, any HTML you'd like. 52 00:03:16,791 --> 00:03:18,491 Finally, we call the plugin. 53 00:03:18,491 --> 00:03:21,853 In this case, since I'm only using the plugin on this one page, 54 00:03:21,853 --> 00:03:24,671 I'll add a new script tag near the bottom of the page. 55 00:03:27,291 --> 00:03:29,930 Then I add the programming. 56 00:03:29,930 --> 00:03:33,931 As you're probably used to by now, we start by selecting something. 57 00:03:33,931 --> 00:03:37,391 In this case, the container div holding the individual slides. 58 00:03:37,391 --> 00:03:42,053 It's a div with a class of slides and then we call the plugin. 59 00:03:42,053 --> 00:03:43,951 Lets see how this works. 60 00:03:43,951 --> 00:03:45,970 I'll save the file and preview the work space. 61 00:03:47,770 --> 00:03:51,990 It's kinda hard to see, but here's the content for div one, but 62 00:03:51,990 --> 00:03:54,750 notice that the div with the text slide two and 63 00:03:54,750 --> 00:03:57,041 the other div with the text slide three aren't visible. 64 00:03:58,350 --> 00:04:01,102 And there are now two buttons, Previous and Next. 65 00:04:01,102 --> 00:04:03,481 You didn't add those, the plugin did. 66 00:04:03,481 --> 00:04:06,421 If you click one, it switches to another div. 67 00:04:06,421 --> 00:04:07,300 Cool. 68 00:04:07,300 --> 00:04:10,041 Now we just need to fill out this content a bit. 69 00:04:10,041 --> 00:04:12,664 Now I'm not going to make you type all this out, 70 00:04:12,664 --> 00:04:15,300 I've prepared a file with the HTML we'll use. 71 00:04:15,300 --> 00:04:19,810 Open the slides.html file and copy the html from it. 72 00:04:21,740 --> 00:04:27,000 Go back to the index.html file and replace the three simple divs you added. 73 00:04:27,000 --> 00:04:28,730 Make sure you don't delete the outer div, 74 00:04:28,730 --> 00:04:31,820 that's the one that the slides class is applied to. 75 00:04:31,820 --> 00:04:36,311 What you're pasting is four new divs, really four new slides for the home page. 76 00:04:36,311 --> 00:04:39,851 Let's save the workspace and preview it. 77 00:04:39,851 --> 00:04:41,490 This looks great. 78 00:04:41,490 --> 00:04:45,485 Now I had you copy and paste the HTML for the slides, but you'd of course, 79 00:04:45,485 --> 00:04:47,951 use your own HTML when creating this effect. 80 00:04:47,951 --> 00:04:51,621 There's nothing special about these divs, you can create your own divs and 81 00:04:51,621 --> 00:04:53,872 place whatever content you want inside them. 82 00:04:53,872 --> 00:04:57,570 Now the carousel works, but these buttons look kind of bad. 83 00:04:57,570 --> 00:04:59,512 We'll fix that in the next video. 84 00:04:59,512 --> 00:05:04,592 As you just saw, the slick plugin is easy to use, but it's also quite powerful. 85 00:05:04,592 --> 00:05:06,029 The creator of the plugin, 86 00:05:06,029 --> 00:05:09,352 Ken Wheeler added a lot of great features that you can tap into. 87 00:05:09,352 --> 00:05:14,194 Simply by passing a JavaScript object full of configuration settings. 88 00:05:14,194 --> 00:05:16,750 We'll explore those features in the next video.