Create Slider Content

The Slider content type includes a single content template, Image Slider, which is used to create an image slider (also called carousel) without requiring any configurations other than those in the Image Slider content editor.

This content template can be used instead of the core Carousel Image content template (which requires a developer to write JavaScript code in order to place selected images in proper carousel format).

The Image Slider content template contains many settings that you can customize to determine the appearance of your image slider. You can add as many images as you want to your image slider, but as a best practice, we recommend that you use no more than eight.

Every slide has to be associated with an image; text-only slides are not supported.

If you are using the Harmony page templates to display the Image Slider content template, we recommend the HarmonyFullWidth or Harmony page template. The Harmony page template has a droppable area designated for an image slider.

To use the HarmonyTwoColumn and HarmonyThreeColumn page templates, your image slider will need to be designed with small images and a minimal amount of text, if any.    

Use the Image Slider content template

1. In the content editor, in the Image Slider area, set the following properties to meet your requirements:
   • Frame change frequency (in milliseconds). The number of milliseconds that each image slide is displayed between transitions. The default value is 6000.
   • Frame transition duration (in milliseconds). The number of milliseconds that it takes to transition from one image slide to the next. The default value is 1800.

• Frame width (image and text) in %. The width of the image slider in terms of a percentage of the container it is in. The default value is 75%. For best results, you should calculate the exact width that the image slider will be based on the size of the container and the percentage value entered; your images should all be this calculated width and a uniform height. If images are not a uniform height, the height of the image slider will change as it transitions from slide to slide.
• Frame transition effect. The animation style used to transition from slide to slide. There are several transition effects available—you can try each of them to discover which one works the best for your site. By default, the transition effect is Slice Down Right.
• Text block position (relative to image). The text block, which contains the title, target page label, posted date, and content summary of the slide, overlays the image, but the position relative to the image is determined by this property. The four options are left, right, bottom, and top.
• Transition user pause. Controls whether the image slider pauses when a cursor hovers over the slider. By default, this property is set to Hover, which means the slider pauses on hover. Alternatively, you can select No to disable pause on hover.
• Include user control. The user control consists of arrows on both sides of the slider that allow users to manually navigate between slides; this property can be set to Yes or No.
• Slider item fields to hyperlink to “Target Page”. A target page can be set for each image slide; for the slides to link to their target page, you must select which components of the slide should link to the target page. The options are Target Page Label, Image, Title, Posted Date, and Content Summary—any number of the options can be selected.

.

2. In the Item #1 area, configure the first image in your slider by doing the following:
   • Click Select, and in the Browse Media Library dialog, select an existing image or upload a new image (to remove an image from the slide, you can later click Clear).
   • Optionally, in the Title box, enter a title for the slide.
   • Optionally, in the Posted On box, enter the date that this image was added or a date related to the subject of the image (e.g., the date that the corresponding article was posted). The date is manually entered and can be formatted in any way that is suitable for your requirements.
   • In the Alternative Text box, enter text that will be used by screen readers and people who are viewing the site in a way that prevents them from downloading images.
   • In the Title Text box, enter text that will appear when the user’s cursor hovers over the image.
   • Optionally, in the Target Page Label box, enter the title or a label for the target page (this should only be completed if a target page is selected).
   • Optionally, click in the Target Page box, and in the Select Link dialog, select a page for the image to link to.
   • Optionally, in the Content Summary box, enter summary text or a related message to associate with the image.

3. To add an additional image, remove an image, or rearrange the images in your slider, click the appropriate button at the bottom of any image section (i.e., Item #1):
   • Add New Item. Add an image to the slider.
   • Remove Item. Remove the image from the slider.
   • Move down. Move the image down one position (images are displayed in sequence from top to bottom).
   • Move up. Move the image up one position.
4. In the Actions panel, click Save.