Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Using jQuery Plugins!
You have completed Using jQuery Plugins!
Preview
Learn how to use the Slick plugin to add an interactive slideshow to our project's home page.
Basic HTML Structure for a Carousel
<div class="slides">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>Calling the Plugin
<script>
$('.slides').slick();
</script>Resources
Related Treehouse Courses
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up