FREELessons: 8Length: 45 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Carousels

In this lesson, you will learn how to create an animated image carousel using just a few simple lines of HTML markup.

Useful Links

2.6 Carousels

Hello and welcome back. In this lesson we're gonna use just a few lines of HTML in order to create a really nice responsive animated carousel using material. And again it's ridiculous how easy this is to create. So we've got our starting pen here which just has a div of a class of container. Because we wanna put everything inside a container. And you can find the URL for this pen in your notes for this lesson. And we'll just click on fork to create a new copy of it. And let's see just how easy this is. So inside our container I'm gonna create another div with a class of carousel. And then inside this div, we just need a series of anchor tags. Each of which will have a class of carousel item and inside those anchor tags, we're gonna have a series of images. And that's all we need in our HTML to get this to work. So, again, I'm going to create, let's say five different anchor tags with images inside them. So, I'm going to put this inside parenthesis here for my zen coding. And we're going to say a greater than, because inside that anchor tag I want an image. So, actually, first we need to give this anchor tag a class name, so, we're going to say a., and the class name we're looking for here is carousel-item, so each of these anchor tags is going to have that class applied to it, and then we have the greater than sign inside those items, we're going to have an image. So then outside the parentheses here I'm just going to hit times five, I'm going to have five different copies of that, and then we'll hit tab to fill that out. So I don't need these hrefs so I'm going to hold onto alt and click and drag over those to get rid of all of those at the same time. And inside our anchor tags, we have these images, and we need to add sources there but I'm gonna get rid of these alt attributes. Don't tell the W3C, but for now we will just focus on the source attribute. So again, I'm gonna alt click and drag down, and I've got the URL I'm looking for in my clipboard, right now. Oops, I need to do that again. So I'm just gonna paste that, here. And these are all very similarly named, which is why I'm just pasting it five times. And then I'm just gonna change the numbers here for these other ones. We have 8, 9, 10, 11, and 12. And again so we've got our div with the class of carousel inside that we have five anchor tags with the class of carousel item and then inside those anchor tags we have our images. Now you can use text inside these carousels instead of images if you want to. But I'm just gonna focus on images for the purposes of this lesson. This actually has a lot of options that you can find on the Materialize website, different ways that you can display this carousel. But again we're just gonna focus on the defaults for now. So as you can see, we've created all the markup we need but our carousel still isn't showing up on the right over here. Well, I told you that this is all the HTML you would need but we're also gonna need one line of JavaScript code in order to make this work. So we're gonna jump in to our JavaScript and we're gonna point to this carousel object and we're going to run the carousal method which will make it start working. So in our JavaScript, we're gonna use jQuery here to point to our carousel object which is the div of the class of carousel. So in jQuery the way you do that is you type a dollar sign and then in parenthesis and in quotation marks we're gonna type in the CSS class or selector that we would use to point to that item. And so we're gonna type in .carousel. So that will point to the div of the class of carousel and then after the closing parentheses here, all we need to do is type .carousel open and close parenthesis, semicolon to end our statement, and now we have a fully functioning carousel on the page. And we can click on any of these images, and watch them animate to the front. Or if you're using a tablet or a phone you can just click and drag across. So you can use swipe gestures to navigate through the different images in your carousel. And it's an endless seamless loop here, so it's just going to loop through those five images over and over again. But again, it's a very, very simple process to create. Again, it was just a few lines of HTML code, and one line of JavaScript. So thank you for watching, and I'll see you in the next lesson.

Back to the top