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