Image Carousels

Featuring an image at the top of the page helps to call out a designer's best work. 0:00 But what if they want to feature different types of images? 0:06 For example, maybe they do work in different industry like education and 0:10 health care. 0:14 Or maybe they design websites as well as mobile apps. 0:15 For these reasons, it would be nice if users could show more than one featured 0:19 image at the top of the page. 0:24 However, we still want the image to be large and 0:27 prominent and not in the form of a gallery. 0:30 A common pattern to solve this problem is an image carousel, 0:34 which is sometimes called a slider. 0:38 In this pattern, an image is shown for a period of time, and then the next 0:41 image is displayed, usually with some kind of sliding transition. 0:47 This pattern also sometimes features buttons, arrows, or 0:52 controls of some kind that allows the user to choose from the available images. 0:56 This feature is a bit more complex and requires some JavaScript. 1:03 Fortunately, Bootstrap has us covered. 1:08 Frameworks like Bootstrap often include common design patterns like 1:11 this because many different types of websites need to use them. 1:16 In Bootstrap, these are called components. 1:20 Let's take a look in the documentation. 1:23 On the left side of Bootstraps' documentation in the list of components, 1:26 similar to the nav bar component, we have the Carousel component. 1:30 On this page, there are several examples, such as this simple carousel or 1:36 carousels with controls and more complex examples. 1:42 However, for this example, 1:48 we're just going to use the most simple version of the carousel. 1:50 So we're going to follow this example and use these classes, 1:55 carousel slide, and this data-ride="carousel". 2:00 And the carousel-inner and the carousel-item classes. 2:05 So let's switch over to our workspace. 2:11 And down here on the featured section, I'm going to add 2:17 those first two classes, carousel and slide. 2:26 And then the attribute data-ride="carousel". 2:31 Then, I'll add a div with the class carousel-inner. 2:43 And this will act as our container for the carousel, and 2:53 then we need some carousel items. 2:57 So I'll add more divs, so 2:59 this first one will have the class carousel-item. 3:02 And then inside that, we'll add an image. 3:10 And it doesn't need to have a real source. 3:14 We'll just put that there. 3:19 And then we just need to copy and paste this three times so 3:21 that we have three carousel-items and we set this first one to active. 3:25 So it's first when the page loads. 3:32 Great, now let's save this. 3:35 And this markup will work with Bootstraps' built-in JavaScript that's already 3:36 included on the page. 3:41 Now let's hop over to our CSS and first, 3:44 let's change the featured class to be an ID of featured. 3:48 And let's also make that corresponding change in our HTML, and we'll save that. 3:58 And the reason we're doing that is because the featured section is 4:09 unique on a page and we won't have any others of it. 4:13 And we're going to change what's inside here. 4:17 So first we're going to remove these first two declarations and 4:21 leave the margin bottom and that's it for the featured ID. 4:27 For the carousel items, that's where we'll add our 4:35 500 pixel height and our background colors. 4:40 So by default, give this a value of 90F, 4:45 so it'll be this purple color. 4:52 But we want the other two carousel items to have a different color than the other 4:57 slides in the sequence, so that we can see the transition happen. 5:01 So to do that, we'll use 5:06 the class carousel item, 5:11 and nth-child(2). 5:15 And we'll give that a different background color. 5:19 We'll doing something like 09F and that will be this nice blue color. 5:23 And then, we can copy and paste that and change it to nth-child(3). 5:28 And I'll change this color one more time. 5:31 Say 0F9, and that will be this nice green color. 5:34 Now, let's save this and we'll preview this in the browser. 5:41 And you can see the image carousel will start on the first image. 5:46 And then after a brief moment, it will transition to the next image and so forth. 5:50 This might need some modification with real images in place, 5:57 but it's good enough for a prototype. 6:01 We can get a pretty good sense of how the layout will look on real devices. 6:03 We were able to put together this prototype really quickly. 6:10 But even in its current state, we can share this with stakeholders, 6:13 conduct user testing, and get feedback on the design. 6:17 More than likely, this will lead to one or 6:21 more rounds of changes until the basic layout and functionality are right. 6:24 At that point, we can jump in for 6:29 a complete visual design with fonts, colors, additional interactivity. 6:31 And maybe even some quick database tests 6:36 to see how the pages look with different sets of images and text. 6:39 This has been a brief overview of how webpages can be prototyped in a browser. 6:45 There's no right or wrong way to prototype. 6:49 But I think this is much better than just the wireframe, even in its current state. 6:52 Because we can see the real spacing and 6:58 proportions on a computer screen expressed with HTML and CSS. 7:00