Some configuration options have already been mentioned in the preceding sections with regard to caching using HTML 5 session storage, modifying the personalized content through the appropriate targeters and adding additional sliders. Here we will explore the details of the sliders’ implementation that are most pertinent to customization of the sliders.
The JavaScript slider object contains all methods needed for a simple sliding carousel. Provided that the slider’s HTML is structured correctly, very little code is required to create new carousels. Just one function needs to be implemented in a new JavaScript literal notation object: “createSlidePanel” in sliders.js.
The slider object code takes advantage of a new feature in ECMAScript 5 called Object.create(). This method allows the creation of an instance of both the base JavaScript slider object and a customized object without code duplication. If one type of carousel already exists, just one call to Object.create() is required for each instance on the page. Carousels can be of different sizes and can contain different numbers of objects.
CRS-M demonstrates two extensions to the base slider functionality – the promotional content item carousel (the top 2/3 of the page) and the product carousel (the bottom 1/3 of the page).
For the promotional content item carousel, a <div> element was added to indicate the current page of the carousel and the total number of pages in the carousel. This <div> element has an id attribute of mobile_store_circlesContainer and is updated when the promotional content items carousel comes to a stop, for example, on the touch end event.
For the product item carousel, a <div> element was added to display the product information of the product located in the center of the carousel. This <div> element has an id attribute of mobile_store_homeBottomSlotContent and is effectively injected with the information for the product that is located in the center of the carousel when it comes to a stop.
For both carousels, the CSS attribute display is set to none for items that are not on the screen so that a screen reader will not read off-screen content. To facilitate customizations such as this, the slider allows a JavaScript callback function to be passed to it, which is invoked after the touch move or touch end event occurs (see the postTouchEnd function in sliders.js). If you do not need a customization like this, you will not need to pass a callback function to the slider.
A final note about the homepage is that it currently does not have a mechanism to handle the case where HTML session storage is not available. Such behavior would be encouraged for mobile websites targeting a wider range of devices and browsers than those targeted by CRS-M.
Slider coding specifics
The hero images or promos slider is coded in promo.js which calls out to sliders.js and adds the circles support. It writes its HTML to the #homeTopSlotContent <div> element.
The featured products slider code is in horizontal-list.js which calls out to sliders.js. . It writes its HTML to the #horizontalcontainer{n} <div> element where {n} is the index of the slider.
