Preview
Video Player
00:00
00:00
The Carousel Challenge
2:06Practice adding and configuring the carousel in a couple of different situations using the slick documentation for reference and your knowledge of jQuery plugins.
Now it's time for you to practice using
the Slick carousel plugin on your own.
0:00
I've included a couple of practice
files in the workspace on this page.
0:05
You can also download them as
part of the project files.
0:09
I want you to practice adding and
configuring the carousel
0:13
in a couple of different situations using
the Slick documentation for reference, and
0:16
your knowledge of jQuery plugins.
0:20
Let me show you what I want you to do.
0:23
Here's the final design
I'd like you to create.
0:25
Notice that the carousel has previous and
next buttons.
0:28
As well as little dots that let you
navigate all the slides in the carousel.
0:33
The biggest change from what we've made
from our previous use of the carousel is
0:38
that we're showing four slide or
four divs at a time.
0:42
When you press the next button,
the four slides currently visible
0:45
slide to the left, and
four new slides enter on the right.
0:49
You'll need to look at the slick
plugin's documentation to figure out
0:54
how to do that.
0:57
Here's a hint, look for
the Slides To Show option.
0:59
Okay, so here's what you'll need to do.
1:02
First, attach the Slick CSS files.
1:05
All the files are in place in
the workspace on this page.
1:08
You just need to hook them all up.
1:11
Second, attach jQuery and
the Slick Plugin files.
1:14
Third, add a div to hold the slides.
1:18
Four, add the slides.
1:21
To make this simpler,
I have a workspace for this challenge, and
1:23
have two files, the index.html file,
where you'll add the carousel, and
1:26
a slides.html file,
which contains the HTML for the slides.
1:30
Fifth, add the programming
to call the plugin.
1:36
You'll need to look at the Slick Plugin
documentation which I've linked to in
1:39
the teacher's notes to figure out how
to display multiple slides at once.
1:42
Six, add new CSS.
1:48
You'll notice that the dots
are larger than normal, and
1:50
that they're a different color than what's
defined in the Slick themed CSS file.
1:52
You can use the Chrome Developer's Console
to figure out how to do that.
1:57
Good luck, and in the next video I'll
show you how I solved this challenge.
2:01