Carousels

Slide shows

Bootstrap calls them carousels. Here's one:

The arrows at the left and right are the controls.

This is scaled down. You can try the full-sized one.

The code

The template looks messy, but, fortunately, you don't change much of it.

Let's break it down. The whole thing is wrapped in a div:

The only thing you have to mess with is the id. It can be anything, as long as:

• It's unique on the page.
• It matches the ids in the controls. More shortly.

Inside the main div are two parts:

• Slides
• Controls

Slides

Here's the code for the slides area:

Set the img and alt attributes for each slide. For example:

Add as many slides as you want.

Controls

Recall that we have a slides section, and a controls section:

Here's the code for the controls:

You have to match the id you used earlier.

Notice that #. That has to be there.

Summary

To make a carousel:

• Copy the template code.
• Make a div for each slide.
• Make an id for the outer div, and use it in each of the controls.

Preparing images

It's best to make all the images the same size. The images in the example are all 1,024px x 683px. I got them from Unsplash, and sized their width down to 1,024px.

When you resize images, just do one dimension at a time. Let your image editor compute the other dimension for you. Otherwise, the images get distorted.

Suppose you have two images, one is 200px x 200px, and the other is 220px x 200px. The second is a little wider. In that case, don't resize the image, trim its canvas.

What's the difference? Here's a photo of an angry cat.

It's 230px x 296px. I want it square, 230px x 230px.

Suppose I resize it to 230px x 230px. Here's the XnView dialog:

I put 230 in both width and height. Here's what I get:

Distorted. It looks even angrier.

OK, I'll trim the canvas instead.

Height and width are 230. Notice the image position.

This means to start at the top of the image, go down 230px, and chop off everything below that. This is that I get.

The cat's still angry, but the photo is 230px x 230px, without being distorted.

It takes a bit of practice to edit images well. Mess around.

Limit carousel width

Normally, carousels take the entire width of the page, but you can change that. Suppose we wanted this (zoomed out):

The carousel is 10 grid columns wide (out of 12, remember). It's centered, so there's a gap at the left and right. There are gaps above and below the carousel as well.

There are various ways to do this. Let's look at a simple one. First, wrap the carousel in a div.

Now, let's add some classes to the wrapping div.

col-sm-10 ways to make the div 10 grid columns wide. Since there should be 12, there are two left. mx-auto says to center the div, so there'll be blank space to the left and right. mt-4 says to make a margin at the top. mb-4 says to add a margin at the bottom. Why 4? Just play with the number until you get what you want.

Exercise

Up next

Most sites have forms, that let people enter data. Contact forms, shopping forms, search forms... many different types. The next lesson is about how to make forms.