Setting carousel width- fixed or fluid

Starting in v2.0 of Step Carousel, you can now set the outer width of a carousel to a fixed or a percentage value instead. The later setting has wide implications, as it paves the way for a responsive carousel whose width adapts to the width of the browser window or screen size of the user device. For example, the following carousel has its outer width set to 100%:

- Carousel with width set to 100%

1
2
3
4
5
6
7
8
9
10
11
12

With such a setting, the carousel will always span the full width of its parent container. On a mobile device such as a smart phone, the ability to take advantage of the full screen width will be a welcomed one by the viewer. Here is the CSS for the ".stepcarousel" class where we've set the carousel width to be fluid:

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid navy;
overflow: scroll; /*leave this value alone*/
width: 100%;
height: 200px; /*Height should enough to fit largest content's height*/
-webkit-box-sizing: border-box; /* set box model so container width and height value includes any padding/border defined */
-moz-box-sizing: border-box;
box-sizing: border-box;
}

- Carousel with a default width of 700px unless browser width is 860px or below, in which case carousel becomes fluid 100% width

Now, simply setting a carousel to a fluid width of say, 100%, isn't without its pitfalls. If the user is on a wide screen desktop and has his screen maximized, the carousel may take up unnecessarily large amount of horizontal real estate. If your carousel contains a limited number of panels, this may also result in blank spaces towards the right of the carousel. Problems like this is why responsive design has become such a hot topic lately, and there isn't one solution that satisfies all.

One approach to refining our fluid carousel width setting above is to have the carousel carry a fixed, pixel width by default, and only convert to a fluid width when the user browser window or device screen is below a certain value, say 860px. This can be easily done using CSS media queries:

1
2
3
4
5
6
7
8
9
10
11
12

Notice how by default when the browser width is 860px or above, the carousel's width is 700px, leaving some gap between the right edge of the carousel and the right edge of the browser window. Resize the browser's width to 860px or below, and notice how the carousel then spans the entire horizontal width of the page, since its width is now set to 100% instead.

The relevant CSS for the carousel looks like the following:

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid navy;
overflow: scroll; /*leave this value alone*/
width: 700px;
height: 200px; /*Height should enough to fit largest content's height*/
-webkit-box-sizing: border-box; /* set box model so container width and height value includes any padding/border defined */
-moz-box-sizing: border-box;
box-sizing: border-box;
}

@media screen and (max-width: 860px){ /* when document is 860px or less */
.stepcarousel{
width: 100%;
}

We simply utilize CSS media queries to cause the carousel to use a different width value at the specified breakpoint, in this case, max-width : 860px.

Based on your knowledge of responsive design, you can expand upon the above idea to create a carousel whose width (or even height) adapts to different situations and on different devices.

Finally, make sure your page contains the following valid doctype and META tag in order for mobile devices to interpret media queries the way you expect them to:

<!doctype html>
<meta name="viewport" content="width=device-width">

More information on this can be read here.

Table Of Contents