Explore Carousel Settings3:40 with Dave McFarland
The Slick plugin is highly customizable: you can turn a carousel into an animated slideshow, control how fast the slideshow plays and even control how the carousel is navigated, simply by passing a few options to the plugin.
Let's see where we are with our carousel. 0:00 Now, this looks pretty cool, but we need to do something about these buttons, and 0:03 perhaps there are a few other things we can add. 0:06 Let's explore the plugin documentation. 0:09 This link here, Settings, 0:12 will take us to the information we need to modify this plugin. 0:14 As you can see, there are a lot of settings. 0:18 This plugin is really customizable. 0:20 Here are a couple that seem interesting. 0:23 Autoplay. 0:26 This will let us turn the carousel into an automated slide show. 0:27 And the autoplay speed setting controls how fast that slide show runs. 0:32 The arrow setting, looks it controls whether we see the Previous and 0:38 Next buttons. 0:42 I think we may want to turn those off. 0:43 Notice here where it says Default. 0:45 Default means that, if you don't set this option yourself, 0:48 this is how the plugin will normally behave. 0:51 In other words, just like we've seen, the plugin automatically shows Previous and 0:54 Next buttons. 0:58 But we can change that. 0:59 And down here there's a setting named dots. 1:02 This sounds cool. 1:05 I think we should try it out. 1:06 And finally, here's a fade option. 1:09 Maybe we should see what it does first. 1:11 You can follow along in workspaces. 1:14 Just open the workspace on this page and open the index.html file. 1:16 We start by passing an object literal to the plugin. 1:21 This is where we put our settings. 1:25 First, let's try a new effect for when we switch slides. 1:27 We set the fade option to true. 1:32 Usually the plugin will make each slide literally slide across the screen. 1:34 But this option makes the slides fade in and out. 1:38 Let's see how it works. 1:42 I'll save the workspace and preview it. 1:44 That's pretty cool. 1:47 Next, let's turn this into an automated slide show. 1:50 I'll set another option. 1:53 Let's see what this does. 1:56 I'll save the file, and refresh the page. 1:58 All right, we have a slide show. 2:01 You can control the speed of the slide show with the autoplay speed setting. 2:05 Let's also hide the pervious and next buttons. 2:09 And we'll replace them with little dots that let you navigate the slides. 2:20 Let's see how it looks. 2:25 I'll save the workspace and preview it. 2:27 Wait a minute, those don't look like dots. 2:30 We just replaced two ugly buttons with four ugly buttons. 2:33 Fortunately, the slick plugin includes another CSS file named SlickTheme.css. 2:37 This file contains styles that change the appearance of the user interface or UI. 2:44 Items the slick plugin adds to the page. 2:50 Let's go back to our workspace and add a link to that style sheet. 2:52 Why is there this second CSS file? 2:59 Well, the creator of slick realized that many designers will want to craft 3:02 their own styles for the different user interface elements. 3:07 And he didn't want to clutter up the main style sheet 3:10 with a bunch of styles that a designer might change anyway. 3:13 The main style sheet is there to control how the slides are placed on the page, 3:16 not the appearance of the buttons or other UI elements. 3:20 Let's see how the carousel looks with these new set of styles. 3:24 Very cool. 3:31 In the next video, I'll show you how to customize the look of this plugin 3:33 even more with our own CSS styles. 3:36
You need to sign up for Treehouse in order to download course files.Sign up