1
00:00:00,390 --> 00:00:01,280
How did it go?

2
00:00:01,280 --> 00:00:04,410
Were you able to use
the slick carousel yourself?

3
00:00:04,410 --> 00:00:06,660
If not, all it takes is practice.

4
00:00:06,660 --> 00:00:10,780
I'll show you how I did it and
you can follow along in Workspaces.

5
00:00:10,780 --> 00:00:14,620
Click the launch workspaces button to
follow the workspace on this page.

6
00:00:14,620 --> 00:00:17,820
if you tried to figure this out already,
you'll see your workspace and

7
00:00:17,820 --> 00:00:20,100
the files that you made changes to.

8
00:00:20,100 --> 00:00:22,322
If you didn't try,
you'll see what I have here.

9
00:00:22,322 --> 00:00:27,130
An index.html file,
that's the file I'll add the carousel to.

10
00:00:27,130 --> 00:00:30,750
In the JS folder there's jQuery and
a folder for the slick plug in.

11
00:00:31,960 --> 00:00:36,181
I'll start by adding the CSS
files to index.html file.

12
00:00:36,181 --> 00:00:39,421
First I'll add the main slick CSS file.

13
00:00:46,261 --> 00:00:50,230
This contains the styles required to
control the placement of the slides on

14
00:00:50,230 --> 00:00:53,821
the page, but it doesn't have much
in the way of visual styling, so

15
00:00:53,821 --> 00:00:55,711
I'll add the slick theme file, too

16
00:01:01,511 --> 00:01:03,851
This file, as you saw in an earlier video,

17
00:01:03,851 --> 00:01:08,740
has some pretty nice looking formatting
for the various user interface elements.

18
00:01:08,740 --> 00:01:12,860
Like the previous and next buttons and
the dots used to navigate the carousel.

19
00:01:14,030 --> 00:01:15,781
I also need to add jQuery to the page.

20
00:01:19,171 --> 00:01:23,031
This goes at the bottom of the page,
after the HTML in the page loads.

21
00:01:25,761 --> 00:01:28,641
After the script tag,
I'll link to the plugin.

22
00:01:32,310 --> 00:01:35,608
Remember, since the plugin uses jQuery,

23
00:01:35,608 --> 00:01:39,460
you need to put this link
after the link to jQuery.

24
00:01:40,680 --> 00:01:43,270
Now I need to add the slides to the page.

25
00:01:43,270 --> 00:01:44,780
We start with the div.

26
00:01:44,780 --> 00:01:46,540
This is the container for the slides.

27
00:01:48,650 --> 00:01:50,820
This div represents the carousel.

28
00:01:50,820 --> 00:01:54,600
And each div we add inside of
it will be a single slide.

29
00:01:54,600 --> 00:01:56,750
Now, I didn't make you
create each div yourself.

30
00:01:56,750 --> 00:01:58,640
You could, of course, if you wanted to.

31
00:01:58,640 --> 00:02:03,640
But in the slides.html file I have
all the HTML already completed.

32
00:02:03,640 --> 00:02:06,070
There are twelve divs in here,
one for each employee.

33
00:02:07,130 --> 00:02:13,190
I'll just copy the HTML, and paste it
inside the div I added just a moment ago.

34
00:02:15,080 --> 00:02:18,790
Now we're almost there, but
the carousel won't work until we call it.

35
00:02:20,390 --> 00:02:22,030
First I'll add some script tags.

36
00:02:24,850 --> 00:02:27,461
And inside that I'll add
my code to call the plugin.

37
00:02:31,011 --> 00:02:34,362
Now, I want to do a few
modifications to this, for example,

38
00:02:34,362 --> 00:02:39,000
I want to add the dots that let you
control the navigation of the slides.

39
00:02:39,000 --> 00:02:42,710
I'll do that by adding an object literal,
with the dots property set to true.

40
00:02:45,271 --> 00:02:49,660
Now as you'll recall,
I also wanna see four slides at a time.

41
00:02:49,660 --> 00:02:51,591
So let's look at the documentation for
this plugin.

42
00:02:53,445 --> 00:02:55,070
Now here are the settings.

43
00:02:56,180 --> 00:03:00,870
And as I look through them I
find one called slidesToShow and

44
00:03:00,870 --> 00:03:02,955
another called slidesToScroll.

45
00:03:04,692 --> 00:03:08,610
The slidesToShow setting determines
how many slides to show at once.

46
00:03:09,672 --> 00:03:14,120
The slidesToScroll setting determines
how many slides will move at a time,

47
00:03:14,120 --> 00:03:16,220
as I advance the carousel.

48
00:03:16,220 --> 00:03:18,830
I'll go back to my HTML file,
and add some settings.

49
00:03:22,161 --> 00:03:25,338
Now I wanna show four slides at a time.

50
00:03:25,338 --> 00:03:28,560
And I wanna move four of them
each time the previous or

51
00:03:28,560 --> 00:03:31,305
next button, or
one of the navigation dots, is clicked.

52
00:03:31,305 --> 00:03:35,631
I'll save the file and preview it.

53
00:03:35,631 --> 00:03:40,130
This is looking really good,
except those dots are too small and dark.

54
00:03:40,130 --> 00:03:48,751
But I can use the developer's tools to see
what CSS is involved in styling these.

55
00:03:48,751 --> 00:03:55,480
Let's see, here is the slick, or
.slick-dots li button:before style.

56
00:03:55,480 --> 00:03:57,860
We saw that earlier in the section.

57
00:03:57,860 --> 00:04:00,475
We just need to change its font size and
color.

58
00:04:02,140 --> 00:04:02,910
I'll do that now.

59
00:04:04,000 --> 00:04:07,190
And go back to my workspaces and
open the main.css file.

60
00:04:10,770 --> 00:04:14,830
Now I don't want to add this style
to the slick-theme.css file.

61
00:04:16,050 --> 00:04:19,680
If, for example, a new version of the
plugin comes out, I don't want to destroy

62
00:04:19,680 --> 00:04:24,380
my styles by updating and replacing the
old theme file with the updated version.

63
00:04:24,380 --> 00:04:28,140
So I'll keep my new styles
in the main.css file.

64
00:04:28,140 --> 00:04:28,821
Okay, let's check it out.

65
00:04:31,160 --> 00:04:34,705
Everything looks pretty good,
except the color of the dot,

66
00:04:34,705 --> 00:04:38,200
that indicates the current set of slides,
it's too dark.

67
00:04:38,200 --> 00:04:40,321
I'll use the dev tools again to
figure out what I need to do.

68
00:04:43,191 --> 00:04:47,315
Okay, see,
here's a really long style name.

69
00:04:47,315 --> 00:04:55,280
.slick-dots li.slick-active button:before.

70
00:04:55,280 --> 00:04:59,020
Okay, let's see what happens if I
change this black setting to white.

71
00:05:05,960 --> 00:05:06,930
Perfect.

72
00:05:06,930 --> 00:05:09,001
I'll just add a new style
to the main .css file.

73
00:05:21,271 --> 00:05:26,370
Now the highlighted dot will appear white,
not dark gray, and be easier to see.

74
00:05:26,370 --> 00:05:26,870
Let's check it out.

75
00:05:28,681 --> 00:05:31,550
Okay, this looks great!

76
00:05:31,550 --> 00:05:33,850
I hope you were able to
add the plugin as well.

77
00:05:33,850 --> 00:05:37,800
I encourage you to check out the
documentation and test out other ideas for

78
00:05:37,800 --> 00:05:40,650
adding this plugin to your websites.

79
00:05:40,650 --> 00:05:42,610
We've reached the end of this course.

80
00:05:42,610 --> 00:05:45,960
I hope you've learned how
useful jQuery plugins can be.

81
00:05:45,960 --> 00:05:47,750
Most are easy to use.

82
00:05:47,750 --> 00:05:51,810
They also can add a lot of interactivity
and visual flair to a site.

83
00:05:51,810 --> 00:05:55,710
But best of all, jQuery plugins
don't require you to spend hours and

84
00:05:55,710 --> 00:05:59,300
hours to program the same
solution yourself.

85
00:05:59,300 --> 00:06:01,850
Now go and
find more useful jQuery plugins.

86
00:06:01,850 --> 00:06:05,240
If you find a really good one,
make sure you post it to the forum so

87
00:06:05,240 --> 00:06:08,120
other students at Treehouse
can learn about it.

88
00:06:08,120 --> 00:06:09,060
Good luck and have fun.