Each carousel on the homepage can be broken down into five basic components:
An outermost
<div>element representing either the top 2/3 of the page or the bottom 1/3 of the page––mobile_store_homeTopSlotormobile_store_homeBottomSlot––respectivelyInside this, an inner
<div>element that will “slide” - eithermobile_store_homeTopSlotContentormobile_store_homeBottomSlotContentInside that, another
<div>containing elements of classcell, representing the individual items - either promotional content items or individual productsThe base JavaScript slider object that provides the sliding effect
Also inside
mobile_store_homeTopSlotContentormobile_store_homeBottomSlotContent, customized content contained in another<div>
In its basic form (without styling or content), the homepage when rendered would appear as follows, where there can be any number of <div> elements of class cell:
<div id="homeTopSlot">
<div id="homeTopSlotContent">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div id="circlesContainer"></div>
</div>
<div id="homeBottomSlot">
<div id="homeBottomSlotContent">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div id="homeBottomSlotProductDetails"></div>
</div>Component 1 above––the outermost <div> element––allows each slider and its corresponding page elements to be cleanly divided and defined. Sliders can be added and removed independently of one another.
Component 2 – Inner container
Component 2 above––the inner <div> element––is used by the JavaScript object representing the carousel to provide the sliding effect by changing the relative position of this <div> within its container. As the user swipes to the left, the “left” attribute of this <div> decreases based on:
the duration for which the finger is on the screen, and
the distance for which the finger travels
The JavaScript code uses the distance and duration information to calculate the momentum of the carousel and to calculate which cell the carousel should settle on as the central item when the swipe is complete.
Component 3 – Cell elements
Component 3 above––the <div> elements of class cell ––each represent a section of the carousel. These elements can contain images, links, or any other elements that are needed. The JavaScript object that represents these carousels––the slider (component 5)––looks for these elements in order to add CSS classes and attributes to the cells. These attributes and classes ensure that the cells are correctly and statically positioned inside their container. It is important to understand that when the user slides a finger on the screen, these cells do not move independently but as a single group that slides back and forth. This grouping is the function of component 2.
Component 4 – The slider
Component 4 above – the slider itself – is the base JavaScript slider that provides methods for sliding/swiping between the cells. The definition of this object can be found at /Storefront/j2ee/store.war/mobile/js/atg/sliders.js. Each of the 2 carousels on the homepage is an instance of this slider, and two customizations of the base slider are demonstrated here.
Component 5 – Custom content
Component 5 above demonstrates how to customize the base slider to add additional/specific content. These customizations are discussed in more detail in the “Extending the Sliders” section.
