Preview
Video Player
00:00
00:00
The Carousel Challenge Solution
6:09I'll show you how I solved the challenge from the last video.
How did it go?
0:00
Were you able to use
the slick carousel yourself?
0:01
If not, all it takes is practice.
0:04
I'll show you how I did it and
you can follow along in Workspaces.
0:06
Click the launch workspaces button to
follow the workspace on this page.
0:10
if you tried to figure this out already,
you'll see your workspace and
0:14
the files that you made changes to.
0:17
If you didn't try,
you'll see what I have here.
0:20
An index.html file,
that's the file I'll add the carousel to.
0:22
In the JS folder there's jQuery and
a folder for the slick plug in.
0:27
I'll start by adding the CSS
files to index.html file.
0:31
First I'll add the main slick CSS file.
0:36
This contains the styles required to
control the placement of the slides on
0:46
the page, but it doesn't have much
in the way of visual styling, so
0:50
I'll add the slick theme file, too
0:53
This file, as you saw in an earlier video,
1:01
has some pretty nice looking formatting
for the various user interface elements.
1:03
Like the previous and next buttons and
the dots used to navigate the carousel.
1:08
I also need to add jQuery to the page.
1:14
This goes at the bottom of the page,
after the HTML in the page loads.
1:19
After the script tag,
I'll link to the plugin.
1:25
Remember, since the plugin uses jQuery,
1:32
you need to put this link
after the link to jQuery.
1:35
Now I need to add the slides to the page.
1:40
We start with the div.
1:43
This is the container for the slides.
1:44
This div represents the carousel.
1:48
And each div we add inside of
it will be a single slide.
1:50
Now, I didn't make you
create each div yourself.
1:54
You could, of course, if you wanted to.
1:56
But in the slides.html file I have
all the HTML already completed.
1:58
There are twelve divs in here,
one for each employee.
2:03
I'll just copy the HTML, and paste it
inside the div I added just a moment ago.
2:07
Now we're almost there, but
the carousel won't work until we call it.
2:15
First I'll add some script tags.
2:20
And inside that I'll add
my code to call the plugin.
2:24
Now, I want to do a few
modifications to this, for example,
2:31
I want to add the dots that let you
control the navigation of the slides.
2:34
I'll do that by adding an object literal,
with the dots property set to true.
2:39
Now as you'll recall,
I also wanna see four slides at a time.
2:45
So let's look at the documentation for
this plugin.
2:49
Now here are the settings.
2:53
And as I look through them I
find one called slidesToShow and
2:56
another called slidesToScroll.
3:00
The slidesToShow setting determines
how many slides to show at once.
3:04
The slidesToScroll setting determines
how many slides will move at a time,
3:09
as I advance the carousel.
3:14
I'll go back to my HTML file,
and add some settings.
3:16
Now I wanna show four slides at a time.
3:22
And I wanna move four of them
each time the previous or
3:25
next button, or
one of the navigation dots, is clicked.
3:28
I'll save the file and preview it.
3:31
This is looking really good,
except those dots are too small and dark.
3:35
But I can use the developer's tools to see
what CSS is involved in styling these.
3:40
Let's see, here is the slick, or
.slick-dots li button:before style.
3:48
We saw that earlier in the section.
3:55
We just need to change its font size and
color.
3:57
I'll do that now.
4:02
And go back to my workspaces and
open the main.css file.
4:04
Now I don't want to add this style
to the slick-theme.css file.
4:10
If, for example, a new version of the
plugin comes out, I don't want to destroy
4:16
my styles by updating and replacing the
old theme file with the updated version.
4:19
So I'll keep my new styles
in the main.css file.
4:24
Okay, let's check it out.
4:28
Everything looks pretty good,
except the color of the dot,
4:31
that indicates the current set of slides,
it's too dark.
4:34
I'll use the dev tools again to
figure out what I need to do.
4:38
Okay, see,
here's a really long style name.
4:43
.slick-dots li.slick-active button:before.
4:47
Okay, let's see what happens if I
change this black setting to white.
4:55
Perfect.
5:05
I'll just add a new style
to the main .css file.
5:06
Now the highlighted dot will appear white,
not dark gray, and be easier to see.
5:21
Let's check it out.
5:26
Okay, this looks great!
5:28
I hope you were able to
add the plugin as well.
5:31
I encourage you to check out the
documentation and test out other ideas for
5:33
adding this plugin to your websites.
5:37
We've reached the end of this course.
5:40
I hope you've learned how
useful jQuery plugins can be.
5:42
Most are easy to use.
5:45
They also can add a lot of interactivity
and visual flair to a site.
5:47
But best of all, jQuery plugins
don't require you to spend hours and
5:51
hours to program the same
solution yourself.
5:55
Now go and
find more useful jQuery plugins.
5:59
If you find a really good one,
make sure you post it to the forum so
6:01
other students at Treehouse
can learn about it.
6:05
Good luck and have fun.
6:08