Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
jQuery plugins make adding sophisticated user interfaces, quick and simple. In this section, you'll learn how to add a very popular home page effect: a carousel. Carousels condense multiple slides of content into a single slide.
[MUSIC]
0:00
jQuery plugins make adding sophisticated
user interfaces quick and simple.
0:04
In this section you'll learn how to add a
very popular homepage effect, a carousel.
0:09
Carousels condense multiple slides
of content into a single slide.
0:15
You can make the slides change
automatically to create an animated
0:19
slideshow effect, or simply provide
controls to let your site's visitors
0:23
step through the different
slides on the page.
0:27
In your HTML,
the carousel is represented by a div tag.
0:30
Each slide in the carousel is really
just a single div's worth of HTML
0:34
placed inside that outer carousel div.
0:39
In other words, if you start with one div,
and you wanted to,
0:42
say, add five slides,
you'd add five divs inside it.
0:45
The divs for
each slide can hold any HTML you'd like.
0:50
A single image for example, or just text.
0:53
You can add links to a slide so that
they also act like a navigation system.
0:55
In fact, this is one of the most common
uses of a carousel, to highlight content
1:00
located elsewhere on a site, and provide
users an easy way to get to that content.
1:05
Let's take a look at one popular
jQuery carousel plugin named Slick.
1:10
Here's the website for this plugin.
1:15
It has demos, directions and settings.
1:17
It also lists some of
the features of this plugin.
1:21
It's fully responsive, so
it works with responsive web designs.
1:24
That's really good.
1:29
And here it says it's swipe enabled.
1:30
So, it'll work on mobile devices or
any touchscreen device.
1:33
That's excellent.
1:35
Now let's look at a few examples.
1:37
Here you can see single items,
one at a time, with previous,
1:39
next buttons and a little navigation
set of dots at the bottom.
1:44
There's a lot of different ways
you can implement this carousel.
1:49
With multiple items, responsively,
with variable width,
1:51
adaptive heights, bunch of other stuff.
1:58
Add different types of effect like
this fade in, fade out effect.
2:02
Let's take a look at the documentation.
2:08
Here it shows you how to set up your HTML,
add style sheets to the head of your
2:11
document, include the JavaScript that's
required, and how to call the plugin.
2:16
All right, this looks like a great plugin.
2:20
It looks really good and
has great documentation.
2:23
In the next video,
we'll add the carousel to our homepage.
2:25
You need to sign up for Treehouse in order to download course files.
Sign up