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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="row">
   <div class="span10 offset1">
      <div class="carousel">
         <img src="img/leddisplay-big.png" class="layer display" />
         <img src="img/glass-shine-big.png" class="layer glare" />
 
         <div class="carousel-inner">
            <div id="slide0" class="item active">
               <img src="img/screentest1.jpg" />
            </div>
            <div id="slide1" class="item">
               <img src="img/screentest2.jpg" />
            </div>
         </div>
      </div>
   </div>
</div>

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:

1
2
3
4
5
6
7
8
9
.carousel {
   min-height: 720px;
}
.carousel .layer {
   position: absolute;
}
.carousel .glare {
   z-index: 1000;
}

This basically sandwiches the div with the class “carousel-inner” declared on line 7 in between the background image and the display glare image, exactly the effect we want.

Now the tricky bit. Since we want it to be responsive we need to realign our image slides whenever our carousel is resized. This means we need to add some Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function onResize() {
   var slide = {
      width: 708,
      height: 444
   }
 
   var original = {
      width: 780,
      height: 721,
   }
 
   var current = {
      width: $(".carousel img.display").width(),
      height: $(".carousel img.display").height()
   } 
 
   var s = 100 / original.width * current.width;
 
   $(".carousel-inner .item").each( function() {
      $(this).width( slide.width / 100 * s );
      $(this).height( slide.height / 100 * s );
 
      $(this).css('margin-top', 37 / 100 * s);
      $(this).css('margin-left', 38 / 100 * s);
   } );
 
   $(".carousel").css("min-height", current.height);
      $(".carousel-inner").css("height", current.height);
   }
}
 
$(document).ready( function() {
   $(window).resize( onResize );
}

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.