ThemeKit UI

Scrollers

Scroller v Carousel, Gallery & Slider

With over 70% of website visitors using mobile devices the new norm is swiping and scrolling rather than stabbing at previus/next tabs.
The ThemeKit UI Scrollers dont' required a large Javascript file so are fast to download and much better for displaying images on mobile devices

Action

On computers and laptops the items are scrolled by vertical scrolling on the mouse, trackpad or using the optional scrollbar.
In mobile devices the items are scrolled using horizontal swiping.
The scroll dorection is indicated by the icon in the ooptional header.

Image Scroller

The image scroller has controls for image width and image width on phones in portrait mode. The images have a lazy loading optional, adjustable spacing and controls for adding a border.

Links

When links are selated the link icon appears at the top right of the image. The icons can appear on hover on computers.
The links can be configured globally for internal or external pages.

Info Scroller

Header

A header can be inserted if required.
It has an h1 heading and an SVG scroll icon.

Article

Content

Each item has a heading, text, optional spans and an optional full width link fixed to the bottom of the container.

Text

Spans

Two optional styled spans can be used for price/date or for a name when used for testimonials.

Roddy McKay
Images

Vertical Scroll

Computer users are used to vertical scrolling. The content scrolls horizontally on vertical mouse/trackpad scroll.

Hero

Horizontal Scroll

Mobile device users are used to swiping so - touch on screen devices - horizontal left/right swiping is used.

Cards

Scrollbar

A horizontal scrollbar can be added which has a control for the thumb color and for the -webkit track background.

Slider

Links

Links are fixed to the bottom of the container and have a background hover animation with global switching from internal to external.

Media Cards

Info Scroller

The ThemeKit UI Info Scroller can be used for info links to internal or external pages, testimonials/user comments etc.

Scroller Gallery

The image gallery scroller has the same scroller functions as the image scroller version ecept for the captions and link icons being optional.