Preview
Video Player
00:00
00:00
Add a Carousel to a Page
5:17Learn how to use the Slick plugin to add an interactive slideshow to our project's home page.
Slick follows the familiar
jQuery plugin pattern.
0:00
Add a CSS file, some JS files and
structure HTML in a certain way,
0:03
then you select a page element and
call the plugin.
0:08
In the case of slick, the most challenging
part is simply adding the HTML that
0:11
makes up the carousel and
even that isn't very difficult.
0:16
Let me show you how.
0:19
Let's add the carousel
plugin to the home page.
0:21
The most time consuming part of this
is adding the HTML for the plugin.
0:24
Now remember, the basic pattern.
0:28
First, we add CSS and JavaScript files.
0:30
Secondly, we structure HTML for
the plugin.
0:33
Third, we call the plugin.
0:35
If you'd like to follow along, launch
the workspace on this page or download
0:38
the project files for this course and
follow along using your own text editor.
0:41
You'll see inside the js folder,
a new folder for the slick plugin.
0:45
Inside there are some CSS files,
JavaScript files and a fonts folder.
0:51
There are several CSS files,
including a couple of .scss files.
0:56
Now those are Sass files and
are used to generate CSS.
1:00
You don't need to know Sass
in order to use this plugin,
1:04
but if you wanna learn more about creating
CSS using Sass, see the Teacher's Note for
1:07
links to Treehouse courses about it.
1:11
In addition,
there are two JavaScript files.
1:15
You want to use the .min or
minified version, because it's smaller.
1:18
But if you wanna look at the actual
programming that makes up the slick
1:23
plugin, open the slick.js file.
1:26
As you can see,
there's a lot of code in here.
1:29
Let's start by adding
a link to the style sheet.
1:32
Open the index.html file and
above the link to the main.css file,
1:35
add another link.
1:40
We add this link before the main.css file,
because as you'll see later,
1:46
we're going to modify the main.css file
to tweak the appearance of our plugin.
1:50
Next, we link to the JavaScript file.
1:58
That goes at the bottom of the page.
2:00
Remember that a plugin's JavaScript
file must load after the jQuery file.
2:05
A carousel is a way of
displaying a series of div
2:10
tags as individual slides on the page.
2:13
The slick plugin needs your HTML to
be structured in a particular way for
2:17
it to work.
2:22
First, you must create a div
tag to hold your slides.
2:23
I've added a class name here, so
that it's easy to select this div and
2:28
apply the plugin to it,
then you add div tags inside it.
2:34
For example.
2:38
Now each div will represent one slide
in the final design, I'll add another.
2:42
And one last div.
2:48
I'm keeping the code very simple to start,
just so
2:54
you can see how little you need
to do to get this effect working.
2:57
However, when using this plugin,
3:01
you'd fill each of these divs
with whatever content you'd like.
3:03
It might be a photograph or a headline and
3:06
some text, describing a new
product your company offers.
3:08
The div can hold links,
bulleted lists, any HTML you'd like.
3:12
Finally, we call the plugin.
3:16
In this case, since I'm only using
the plugin on this one page,
3:18
I'll add a new script tag
near the bottom of the page.
3:21
Then I add the programming.
3:27
As you're probably used to by now,
we start by selecting something.
3:29
In this case, the container div
holding the individual slides.
3:33
It's a div with a class of slides and
then we call the plugin.
3:37
Lets see how this works.
3:42
I'll save the file and
preview the work space.
3:43
It's kinda hard to see, but
here's the content for div one, but
3:47
notice that the div with
the text slide two and
3:51
the other div with the text
slide three aren't visible.
3:54
And there are now two buttons,
Previous and Next.
3:58
You didn't add those, the plugin did.
4:01
If you click one,
it switches to another div.
4:03
Cool.
4:06
Now we just need to fill
out this content a bit.
4:07
Now I'm not going to make
you type all this out,
4:10
I've prepared a file
with the HTML we'll use.
4:12
Open the slides.html file and
copy the html from it.
4:15
Go back to the index.html file and
replace the three simple divs you added.
4:21
Make sure you don't delete the outer div,
4:27
that's the one that the slides
class is applied to.
4:28
What you're pasting is four new divs,
really four new slides for the home page.
4:31
Let's save the workspace and preview it.
4:36
This looks great.
4:39
Now I had you copy and paste the HTML for
the slides, but you'd of course,
4:41
use your own HTML when
creating this effect.
4:45
There's nothing special about these divs,
you can create your own divs and
4:47
place whatever content
you want inside them.
4:51
Now the carousel works, but
these buttons look kind of bad.
4:53
We'll fix that in the next video.
4:57
As you just saw, the slick plugin is easy
to use, but it's also quite powerful.
4:59
The creator of the plugin,
5:04
Ken Wheeler added a lot of great
features that you can tap into.
5:06
Simply by passing a JavaScript object
full of configuration settings.
5:09
We'll explore those
features in the next video.
5:14