Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Using jQuery Plugins

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

What is a Carousel?

2:28 with Dave McFarland

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.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up