"Illustrator Foundations" was retired on January 6, 2020. You are now viewing the recommended replacement.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Using jQuery Plugins

Well done!

You have completed Using jQuery Plugins!

Sign up for Treehouse Back to Library

Explore Carousel Settings

3: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.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up