Custom Responsive Bootstrap Carousel

Some time ago I had to implement an image carousel and since I was using Bootstrap to build the website I thought I might as well use the built-in Bootstrap Carousel functionality. However, there was one little caveat. This carousel had to display a reflection overlay and on top of that, the carousel needed to be responsive as well.

Let have a look at the finished result before we move on:

The cool thing about this is, since it’s responsive the embedded iframe version you see above fits within any page column size. You can also check out the full browser version. If you open up the full browser version don’t forget to resize your browser window to see the responsive kick in.

OK. Now some code. This is the basic HTML structure. I’ve have skipped the boilerplate. If you want to have a look at that you’ll have to browse through the code in the link above.

As you can see, the HTML is pretty simple. On line 2; we only want to use 10 out of the 12 spans so we offset 1 span from the left. On line 3 we’re defining some context by wrapping everything in a div with the “carousel” class. Doing this let’s us position the various layers for the background image (the display) and the display glare that overlays on top of everything. This is the CSS that goes along with it:

We find need to define some information. We need to know the width and height in pixels of the slide (line 2). We also need to know the width and height of the background and glare image (line 7) and we need to get the current width and height of the background (line 12).

On line 17 we calculate the scale factor in percentage based on original and current background image size. This allows us to adjust the size of the slides accordingly.

On line 19 we loop through all the carousel slides and set the width and height based on the scale factor we calculated before. We also need to set the top and left margin since slide doesn’t start at 0,0. Again we use the scale factor to calculate the position.

Finally we can adjust the overall height of the carousel element so that content below it will flow nicely withing the page.

And there you go. That’s all there is to it.

This entry was posted in Programming. Bookmark the permalink. Both comments and trackbacks are currently closed.