Responsive Carousel. Part 2 – Implementation

With everything explained, let’s go by steps.

Achieving full responsiveness was an easy task. The client was using bootstrap 2.3.2, so we defined some media queries, hide/show some elements and adjust the others on the different screen sizes.

We extended the OOTB list component from wcm/foundation/components/list, which already includes the functionality for making lists from different sources. We created a carousel.html which resulted as:

<!–/* Carousel Component */–>
<div data-sly-unwrap=”${wcmmode.edit}” class=”cq-dd-pages” data-sly-use.listComponent=”list.js” data-sly-use.emptyRenderer=”emptylist.html”>

<div id=”bootstrapCarousel” class=”carousel slide” data-ride=”carousel”>
<div class=”carousel-inner”>

<!–/* Icon to be displayed if the list is empty */–>
<div data-sly-call=”${emptyRenderer.emptylisttemplate @ list=listComponent}” data-sly-unwrap></div>

<!–/* List Loop */–>

<div data-sly-element=”${listComponent.element}” data-sly-list.listItem=”${listComponent.list}” class=”foundation-ordered-list-container”>

<div class=”item ${listItemList.index == 0 ? active : ” }”>
<a href=”${listItem.item.path}.html” title=”${listItem.item.title}”>
<div class=”article-summary-image”>
<a href=”${listItem.item.path}.html”>

<!–/* Adaptive Image markup */–>
<div data-picture data-alt=’${slide.title}’>
<div data-src=’${listItem.item.path}.image.370.150.medium.jpg’ data-media=”(min-width: 1px)”></div>

<div data-src=’${listItem.item.path}.image.480.190.medium.jpg’ data-media=”(min-width: 480px)”></div>

<div data-src=’${listItem.item.path}.image.770.300.medium.jpg’ data-media=”(min-width: 768px)”></div>

<div data-src=’${listItem.item.path}.image.940.340.high.jpg’ data-media=”(min-width: 980px)”></div>

<div data-src=’${listItem.item.path}.image.1170.400.high.jpg’ data-media=”(min-width: 1199px)”></div>

<noscript>
<img src=’${listItem.item.path}.image.370.150.low.jpg’ alt=’${listItem.item.title}’>
</noscript>
</div>
</a>
</div>
</a>
<div class=”carousel-caption”>
<h4>${listItem.item.title}</h4>
</div>
</div>
</div>

<!–/* List controls */–>
<a data-sly-test=”${!listComponent.isEmpty}” class=”carousel-control left” href=”#bootstrapCarousel” data-slide=”prev”>&lsaquo;</a>
<a data-sly-test=”${!listComponent.isEmpty}” class=”carousel-control right” href=”#bootstrapCarousel” data-slide=”next”>&rsaquo;</a>
</div>
</div>
</div>

After ending the modifications, we look to check the sizes of the downloaded images just to what are we saved by doing things this way.

Image sizes by dimensions
370 * 150 – 10.5 kb
770 * 300 – 28.4 kb
940 * 340 – 139 kb
1170 * 400 – 186 kb

So as we see, the load reduction from a desktop to a mobile device can get as big as 94%, which, in a 6 image slider can represent a really important reduction on the page load (in mb and time).

After solving this aspect, we still needed to add swiping functionality. We used jquery mobile lib to achieve this. With some minor changes, we had the functionality working perfectly.



We added listeners for the events defined by jquery, and created custom handlers for the right and left swipes, which changed the images displayed and also, modified the mobile navigation “dots”.

This demonstration showed how to create an always useful carousel adjusted to today’s needs, or at least, until the picture tags gets supported by all the major browsers! It’s really recommendable that you read the steps and figure out how to accomplish this, that’s why this time, we are not including the source code for the example but feel free to ask any question on the comments section.