dcm.SliderWidget

The <dcm.SliderWidget> tag provides a CMS-ready approach to displaying multiple images as a slide show, one at a time.

Attributes

Path: path to the gallery folder, the /galleries is assumed, so / is the root gallery folder. If the images are in /slides - for example /slides/image1.v , /slides/image2.v , etc - then the Path is /slides
Variant: which variant of the image to use, defaults to full ;
Extension: which file extension of the image to use, defaults to jpg ;
Display: set to “Banner” if displaying in banner mode, set to “LRControl” if the default left and right controls should display. Combine the options with a comma between them.
Centering: used with banner mode, set to true if you want the banner centered, or to css to use CSS Mode for centering. If using css mode, the attributes BannerHeight , BannerMaxHeight , BannerMinHeight , and CenterAlign need to be present and set as well. See below for usage notes and example.
Period: time in ms between each slide transition (this does not include the actual transition time, see usage notes). Defaults to 2000 (2 seconds).
SyncTo: get/share the image list from a GalleryWidget instead of having our own, ideal for letting a user pick a image from a list of thumbs (in the GalleryWidget) and then showing a larger version (in the SliderWidget). See more below.
SEOPath: a Boolean attribute which determines how the image URL is finally rendered. Setting to True allows SEO to get a meaningful name assigned to the core image file.
- example when set to True : root-domain/galleries/horizontal-paired-images/placeholder-1.jpg?dc-cache=20240430T160608239Z&dc-variant=full
- example when set to False : root-domain/galleries/horizontal-paired-images/placeholder-1.v/full.jpg?dc-cache=20240430T160608239Z
Prepload: TODO explain (defaults to none)
ImageCache: TODO explain (defaults to best caching)
PropertyEditor: TODO explain

Usage Notes

When not in banner mode (see Display attribute) then an image automatically sizes to the space it is placed in and does not exceed the screen width nor the container it is placed in. When in banner mode the image will be centered around a hint and will have a minimal height - see examples below.

Template

The image template is a very important, and significantly large, topic that it is handled separately. Please review the image templating page.

Speed / Period

The speed of the slide show is composed of three parts. One part is the value of the Period attribute in ms. This defaults to 2 seconds (2000 ms) and this is how long the image stays fully visible. The parts are the transition time between images and that part is managed in CSS.

Here is an example of overriding the default transition timing:

.dcm-widget-slider img.autoplay {
    transition-duration: 4.4s;
}

.dcm-widget-slider img.manual {
    transition-duration: .8s;
}

The default is 2.2s for autoplay and .4s for manual. The autoplay class is used the slide show is automatically transitioning from one slide to the next. The manual class is used when a user clicks the left/right control to view the next slide. Typically the later is faster. In the example above both transitions have been made very slow.

The transition time is for one half of the transition - firs the fade out then the fade in. So if Period is 2000 and the transition is as the example above shows then the life of an image is:

fade in over 4.4 seconds
fully present for 2 seconds
fade out over 4.4 seconds

10.8 second for each image. And then repeat for next image. Note the first image does not fade in, so the first image only shows for 8.4 seconds in this scenario - though it may have needed some time to load, which could make it seem to be around longer.

CSS Centering Mode

The previous centering mode had some issues with the image suddenly repositioning on websites in mobile view, specifically on resizing and scrolling. This mode take various additional attributes and creates inline CSS styling to accommodate rapid resizing and recentering

BannerHeight : measured in vw units. Sets the height of the banner
BannerMaxHeight : measured in pixels. Sets the max height
BannerMinHeight : measured in pixels. Sets the min height
CenterAlign : Center is only current option.

<dcm.SliderWidget id="bannerTop" class="bannerCurve" Path="/banners" Display="Banner,LRControl"
    Centering="css" BannerHeight="40.5" BannerMaxHeight="810" BannerMinHeight="250" CenterAlign="Center" 
    Variation="full" Period="4000">
    <Image Alias="blue-floor-kitchen" />
</dcm.SliderWidget>

SyncTo

TODO experimental feature

Overlays

TODO

Examples

Be sure to also review how slider aria templates work, see above. This first example shows four slides with the left/right controls enabled.

<dcm.SliderWidget Path="/examples/simple/board" Display="LRControl">
    <AriaTemplate>
        <div role="listitem"></div>
    </AriaTemplate>

    <Image Alias="mac" Title="Mac Orange" />
    <Image Alias="carrie" Title="Carrie Green" />
    <Image Alias="tom" Title="Tom Blue" />
    <Image Alias="lance" Title="Lance Gold" />
</dcm.SliderWidget>

This example would display this image: /galleries/examples/simple/board/mac.v/full.jpg first. The Extension and the Variant have both defaulted so they use full and jpg . Those can be overridden though (see attributes). And note that /galleries is automatically added.

Here is that code output:

This next example alters the slide speed, both the time the slide is fully shown and the duration of the transition. Addition of the Period attribute allows us to change the first part:

<dcm.SliderWidget Path="/examples/simple/board" Display="LRControl" Period="1000" class="fast">
    <AriaTemplate>
        <div role="listitem"></div>
    </AriaTemplate>

    <Image Alias="mac" Title="Mac Orange" />
    <Image Alias="carrie" Title="Carrie Green" />
    <Image Alias="tom" Title="Tom Blue" />
    <Image Alias="lance" Title="Lance Gold" />
</dcm.SliderWidget>

And we can see the css to control the duration like so, to double the speed:

.dcm-widget-slider.fast img.autoplay {
    transition-duration: 1.1s;
}

.dcm-widget-slider.fast img.manual {
    transition-duration: .2s;
}

Note this example only applies to sliders with a fast class present. Here is the output for that example:

An image can be easily made into a banner as well, banners are designed so that they never get t0o short - always have a minimal height for readability. The result is that an image will be clipped on the left and right on a smaller screen. Minimally set the Display to Banner and add a CenterHint to work with this.

<dcm.SliderWidget Path="/examples/one/rock" Display="Banner" Period="4000" CenterHint="200" class="rock-pict" />

Each banner also needs some height information (current, min, max), like so:

.dcm-widget-slider.one {
    height: 400px;
    height: 33.33vw;
    max-height: 400px;
    min-height: 280px;
    overflow: hidden;
}

The max-height would usually match the actual height of the image, the min would be the shortest you ever want it to go. The height needs to be set in vw units as a proportion to the width of the image. This image (gallery) is for 1200 x 400 images so the proportion is 1/3 or 33.33% - use at least two decimal places or the image may not fill in fully in mobile mode.

Here is the output for the banner, please review it at smaller screen widths and compare how it handles to the non-banner mode image above.

page header