Preview
Video Player
00:00
00:00
Explore Carousel Settings
3:40The 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