dcm.CarouselWidget

The <dcm.CarouselWidget> tag provides a way to display rotating banners. Consider using the dcm.SliderWidget instead, it uses fewer resources and is maintained.

Attributes

• Path: specifies where the banner images are. The /galleries is assumed, so / is the root gallery folder.

• Show: specifies which show to display. Shows are specified in the gallery-level meta.json file like this:

  { "Shows": [ { "Alias": "home", "Images": [ "tomato", "grapes", "cucumber" ] , "Title": "Home Banners" } ] }

• Centering: true/false - enable the built-in centering support. TODO explain

• Period: how fast the banners should rotate

• Variant: which variant of the images to use (full is default)

• Preload: true/false - enable preloading of banner image. TODO explain, not tested in current version of dcServer

• Extension: if using an extension other than jpg

Usage Notes

TODO notes - as this widget is being phased out, it may be a while before documentation is added.

Template

In the simplest usage a template contains an img pointing to the path contained in $_Image.Path and wrapped in a div that links to the image alias (folder name) from $_Image.Alias .

<Template> <div data-dcm-alias="{$_Image.Alias}"> <img src="{$_Image.Path}" class="pure-img" /> </div> </Template>

The template is cloned for each image in the gallery and the variables are replaced with the current $_Image values.

Learn more about templates and variables can be used when building a gallery.

Examples

<dcm.CarouselWidget id="bannerTop" Path="/banners/home" Show="home" Centering="true" Period="4000" Variant="full"> <dc.Link id="iconBannerLeft" Icon="fas/chevron-left" IconSize="lg" IconTypeName="circle" Click="DoPrevSlide" /> <dc.Link id="iconBannerRight" Icon="fas/chevron-right" IconSize="lg" IconTypeName="circle" Click="DoNextSlide" /> </dcm.CarouselWidget>

This example would display the images in .v folders contained in this folder: /galleries/banners/home/ (such as this image /galleries/banners/home/tomato.v/full.jpg )

See Also

• TODO