[MUSIC]

jQuery plugins make adding sophisticated user interfaces quick and simple.

In this section you'll learn how to add a very popular homepage effect, a carousel.

Carousels condense multiple slides of content into a single slide.

You can make the slides change automatically to create an animated

slideshow effect, or simply provide controls to let your site's visitors

step through the different slides on the page.

In your HTML, the carousel is represented by a div tag.

Each slide in the carousel is really just a single div's worth of HTML

placed inside that outer carousel div.

In other words, if you start with one div, and you wanted to,

say, add five slides, you'd add five divs inside it.

The divs for each slide can hold any HTML you'd like.

A single image for example, or just text.

You can add links to a slide so that they also act like a navigation system.

In fact, this is one of the most common uses of a carousel, to highlight content

located elsewhere on a site, and provide users an easy way to get to that content.

Let's take a look at one popular jQuery carousel plugin named Slick.

Here's the website for this plugin.

It has demos, directions and settings.

It also lists some of the features of this plugin.

It's fully responsive, so it works with responsive web designs.

That's really good.

And here it says it's swipe enabled.

So, it'll work on mobile devices or any touchscreen device.

That's excellent.

Now let's look at a few examples.

Here you can see single items, one at a time, with previous,

next buttons and a little navigation set of dots at the bottom.

There's a lot of different ways you can implement this carousel.

With multiple items, responsively, with variable width,

adaptive heights, bunch of other stuff.

Add different types of effect like this fade in, fade out effect.

Let's take a look at the documentation.

Here it shows you how to set up your HTML, add style sheets to the head of your

document, include the JavaScript that's required, and how to call the plugin.

All right, this looks like a great plugin.

It looks really good and has great documentation.

In the next video, we'll add the carousel to our homepage.