ThemeKit Lap Carousel
Elegant & Responsive
InfoVideo
Carousel
The carousel can overlap the item above and has the option to animate it upwards. Note how the images can be separated and have a border radius at the top.
The carousel can be centered with a mx-width or full width. The images have captions and can be configured as links.
There are options for setting carousel's operation for computer wide, computer, tablet landscape, tablet portrait and phone portrait.
Control options are …
- Show navigation arrows for each device
- Show styled pager for each device
- Autoplay on/off for each device.
NOTE
Autoplay is never a good idea since it removes control from the visitor. Allowing visitors to click, tap and swipe will increaae the user experience and make them more likely to remember the site and revisit.
Autoplay should NEVER be used when an item is viewed on a battery driven mobile device.
Offsets Grid + Float
Grid
The offset grid has a layout similar to a page with a header, and HTML5 <article, a <figure> and a footer.
The grid has four columns and four rows.
Header
The header can span two, three or four rows as required and has the option to have a background color to make it stand out.
The header can use a different Google hosted font than the remaining text. In the example the header font is Zen Dots and the common font is Stint Ultra Expanded. Both fonts have a fallback to helvetica.
Text Wrap
Both the article and the figure have an image width alt text and a heading and text. The images are floated left and right respectively and the float can be switched if required.
The images have a percentage width which can be adjusted to balance the overall layout.
Column Span
More space can be added to the layout by adjusting the start column number and the columns to span.
The article starts in column 2 and spans three columns.
The figure starts in column one and spans all four columns.
Images
The width of the images is adjusted using sliders. They have the option to add a border to define their edges and can be lazy loaded of they are not in view on page load.
Footer
Since links in text should not be used in a responsive layout, the optional footer has a navigation bar which can provide links to related content.