Home page

The home page in Litium Accelerator is an empty page with just the page name in the page setting. It has one block container with a slider and two banner blocks: 

Page and block display templates is a new concept in Litium 7, where it replaces PageType in the previous version. A display template is a combination of controllers which lets the system know how to render a page or block. Each page type has its own controller, model and view. For the home page they are HomeController and HomeViewModel, while the view is located in Litium.Accelerator.Mvc/Views/Home/Index.cshtml.

By default, the display template for the home page will be set automatically to the correct controller and method.

Two block types are also added by default: slider and banner: 

Slider block

Slider block is a block type that allows uses to add multiple images with custom links and texts. Slides can be added, removed and sorted in the block settings.

The slider and banner blocks share the same design structure. They have a list of SliderBlockViewModel and BannerBlockViewModel respectively, stored as Multi-Field ( Read more about multi-field here ).

To form a slider model, each slide contains BlockImagePointer, LinkText and LinkToPage. These rows are grouped by childOwnerId and ChildIndex columns so we can save and re-create each slider in invidual fields.

Auto play

A slider block is by default configured so that a user changes image by selecting the arrow symbol. But, it can also be configured to auto play. This means that the slider block switches automatically between the included images. You can configure the slider block to auto play by adding autoPlay: true to Litium.Accelerator.Mvc\Client\Scripts\Components\Slider.js:

const CarouselSettings = {
    showStatus: false,
    showThumbs: false,
    infiniteLoop: true,
    autoPlay: true,
};

Banner block

Banner and slider blocks have the same mechanism. The only difference is how they are rendered. We can define multiple banners in the block settings and they will be rendered horizontally. By default, the start page has one block with two banners and one block with three banners.