Horizontal Image Carousel

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

Contents

Description

The Horizontal 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.

Add a Horizontal Carousel Element

Drag-and-Drop the element Horizontal 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 horizontal image carousel (also applies to the Vertical Image Carousel). These properties can be configured from the elements and styles menu / Properties.

Element-carrouselHV02.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 Horizontal Carousel, the two directions are:
      • Right to Left
      • Left to Right
    • 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

Right to Left

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-carrouselH03.png Image Style applied to the images of the carousel. No style by default

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

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

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

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

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