Vertical Image Carousel

From Wiki openElement
Jump to: navigation, search
Path: Elements / Media / Vertical Image Carousel

Contents

Description

The Vertical Image Carousel is an image/photo-centric element in the Media category. It allows users to display a "carousel" of images, which is a single-row stream of photos that can scroll automatically. (In this case, vertically).

Add a Vertical Image Carousel Element

Drag-and-Drop the element Vertical Image Carousel from the elements menu anywhere on the page.
The main configuration menu will open automatically.

Configuration

Main Configuration

The main configuration of this element involves image selection and settings. The configuration form opens automatically when a carousel is added to a page. It can also be opened from the editing pane or the corresponding property in the Elements and Styles Menu -> Properties.

Read more about Image List Configuration


Note: The image property 'Description' is not used in this element. There is no need to fill out this field.

Other Properties

These are the properties specific to the vertical image carousel (also applies to the Horizontal Image Carousel). These properties can be configured from the elements and styles menu -> Properties.

Element-carrouselV02.png


  • 'Edit' Category
    • Image List: List of images to display, opens the main configuration window.


  • 'Settings' Category
    • Automatic: Sets image scrolling into automatic mode. If this option is checked, the zones for scrolling arrows will no longer be accessible.
    • Images Shifted: Number of images shifted with each scroll. This number must be greater than 0.
    • Delay: Delay, in milliseconds, between each image scroll. Only works if 'Automatic' mode is enabled.
    • Animation Effect: Type of effect applied during scrolling. There are two types available:
      • Linear: All images scroll at the same time.
      • Sequential: The images scroll one after the other.
    • Direction: The direction the images scroll in. Only works if 'Automatic' mode is enabled. With the Vertical Carousel, the two directions are:
      • Top to Bottom
      • Bottom to Top
    • Speed: The scrolling speed, in milliseconds, used to move one image. The universal scroll speed depends on this value, on the number of images shifted, and on the transition effect. (For example, if the speed is 1000 milliseconds and there are 3 images shifted, the transition will last (1000*3=3000 ms, or) 3 seconds for a linear effect. For a sequential effect, multiply that value by the number of visible images.)
Properties Default Value

Automatic

Disabled (Unchecked)

Images Shifted

1

Delay

1000

Transition Effect

Linear

Direction

Top to Bottom

Speed

1000

Design and Presets

There are numerous style presets available for this element in the Cloud Library. Presets can be accessed through the Elements and Styles Menu, under the Styles tab, in Style Presets.

To change its appearance, users must override the element's various style zones.

Style Zones (Expert)

Element-carrouselV03.png Image Style applied to the images of the carousel. No style by default

Element-carrouselV04.png Next Button Style applied to the zone of the "Next" button

Default Values
  • Background
    • Image: Element-carrouselV07.png
    • Image Position: Center Center
    • Image Repetition: Fixed
  • Height: 30px
  • Width: 100%
  • Distance Left: 0px
  • Distance Bottom: -30px

Element-carrouselV05.png Previous Button Style applied to the zone of the "Previous" button

Default Values
  • Background
    • Image: Element-carrouselV08.png
    • Image Position: Center Center
    • Image Repetition: Fixed
  • Height: 30px
  • Width: 100%
  • Distance Left: 0px
  • Distance Top: -30px


Disabled CSS Properties

For reasons of layout and functionality (i.e. images being defined in absolute position, etc.), the CSS property "margin" ("outer margin") has been disabled.

Personal tools
Namespaces

Variants
Views
Actions
openElement
Community
Toolbox