What is a Carousel?

[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