Carousel banners carousel-banners

Identify hotspot and image map variables (only for customers using Experience Manager Assets + Dynamic Media)

Start by identifying dynamic variables used by the existing Quickview implementation so that you can enter hotspots and image map data properly during the carousel banner creation process in Adobe Experience Manager Assets.

Optional: Create a Carousel Set viewer preset, as needed.

If you are an administrator, you can customize the behavior and appearance of the carousel by creating your own Carousel viewer preset. The main benefit is that you can reuse this custom viewer preset for multiple carousels. However, users can optionally customize the behavior and appearance of the carousel directly while authoring the carousel. This method is the preferred approach when you want a specific design for a given carousel.

Upload an Image Banner.

Upload image banners that you want to make interactive.

Create Carousel Sets.

In Carousels Sets, users navigate through banner images and select hotspots or image maps to access relevant content.

To create a Carousel Set in Assets, select Create, then select Carousel Sets. Add assets to slides and select Save. You can also edit the appearance and behavior of the carousel directly within the editor.

Add hotspots or image maps to an Image Banner.

Add one or more hotspots or image maps to an image banner and associate each one with an action such as a link, a Quickview, or an Experience Fragment. After you add hotspots or image maps, you finish this task by publishing the carousel set. Publishing creates the embed code that you can use to copy and apply to your website landing page.

See (Optional) Preview carousel banners - Optional. If desired, you can view a representation of your carousel set and test its interactivity.

Publish carousel banners.

You publish a Carousel Set as you would any asset. In Assets, navigate to the Carousel Set and select it and select Publish. Publishing a Carousel Set activates the URL and Embed string.

Do one of the following:

• Add a carousel banner to your website page You can add the carousel banner URL or embed code you have copied onto the website page.

  • Integrate the carousel banner with an existing Quickview. If you use a third-party web content management system, you must integrate the new carousel banner with the existing Quickview implementation on your website.

• Add a carousel banner to your website in Experience Manager If you are an Experience Manager Sites customer you can add the carousel set directly to the page in Experience Manager, using the Interactive Media component.

In Assets, navigate to the folder where you want to create the Carousel Set and go to Create > Carousel Set.

On the carousel banner editor page, select Tap to open Asset Selector to select the image for your first slide.

On the carousel banner editor page, do either one of the following:

• Near the upper-left corner of the page, select Add Slide icon.

• Near the middle of the page, select Tap to open Asset Selector.

Select to select assets that you want to include in your Carousel Set. Selected assets have a checkmark icon over them. When you are finished, near the upper-right corner of the page, select Select.

With the Asset Selector, you can search for assets by typing in a keyword and tapping or clicking Return. You can also apply filters to refine your search results. You can filter by path, collection, file type, and tag. Select the filter and then select the Filter icon on the toolbar. Change the view by tapping the View icon and selecting Column View, Card View, or List View.

See Work with Selectors for more information.

Continue to add slides until you have added all the images that you want to rotate through in the Carousel Set.

(Optional) Do any of the following:

• If necessary, drag slide’s to reorder images intheset list.

• To delete an image, select the image, then select Delete Slide on the toolbar.

• To apply a preset, near the upper-right corner of the page, select the preset drop-down list, then select a preset to apply to the set at once.

To delete a slide, select the slide and then on the toolbar, select Delete Slide. To move a slide, select the reorder icon and hold and move to the desired location.

After you have added the images in slides, you can add a hotspot, image map, or both to your image. See Add hotspots or image maps to an Image Banner.

You can change the visual design and behavior of carousel sets. Select the Behavior and Appearance tabs and adjust how your carousel banner appears or how specific components behave. See Manage viewer presets for more information on how to use the viewer editor.

* Duration that an image displays. By default, each image displays for 9 seconds.
* Animation. By default, each slide transition is a fade. You can change that to a slide transition.
* Style of the buttons. Users can rotate through the banners by tapping each dot or number. You can change where the set indicator buttons appear (and if they are numeric or a dotted style) and how large they are.
* Change the highlight style of an image map or the icon used for hotspots.
* Before you edit a viewer preset, choose the style that you want the preset based on. If you do not choose a style, when you start to edit the viewer preset, you lose all of your changes if you decide change to a different preset.

You can also preview how the carousel banner appears. See (Optional) Preview carousel banners.

Select Save when finished.

From Assets, navigate to the carousel set you want to make interactive.

Select the carousel set and select Edit. The Carousel Viewer Editor opens.

Select the slide you want to make interactive.

Near the upper-left corner of the page, select Hotspot or Image Map.

Do either of the following:

• For hotspots: On the image, select a location where you want the hotspot to appear.
• For image maps: On the image, select, then drag from the top left to the bottom right to create the image map area. You can adjust the size of the image map by dragging the corners.

If necessary, drag the hotspot or the image map to a new location. Add additional hotspots or image maps as necessary.

To delete a hotspot or image map, select the Actions tab. Under the Maps & Hotspots heading, from the Selected Type drop-down menu, select the name of the hotspot or image map you want to remove. Select the Trash icon next to the menu, then select Delete.

In the Name text field, type the name of the hotspot or the image map. This name also appears in the Maps & Hotspot drop-down list. Providing a name makes it easy to identify the hotspot or image map if you decide to change it in the future.

Do one of the following in the Actions tab:

• Select Quickview.

  • If you are an Experience Manager Sites and Ecommerce customer, select the Product Picker icon (magnifying glass) to open the Select Product page. Select the product you want to use, then select the check mark in the upper-right corner of the page so you can return to the carousel banner editor.

  • If you are not an Experience Manager Sites or Ecommerce customer

    • See Identify hotspot variables if you want to define these variables.

    • Then, manually enter the SKU value. In the SKU Value text field, type the product’s SKU (Stock Keeping Unit), which is a unique identifier for each distinct product or service that you offer. The entered SKU value automatically populates the variable portion of the Quickview template so that the system knows to associate the tapped hotspot with a particular SKU’s Quickview.

    • (Optional) If there are other variables within the Quickview that you must use to further identify a product, select Add Generic Variable. In the text field, specify an extra variable. For example, category=Mens is an added variable.

    • See Work with Selectors for more information.

• Select Hyperlink.

  • If you are an Experience Manager Sites customer, select the Site Selector icon (folder) to navigate to a URL.

    note note
    NOTE
    The URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to Experience Manager Sites pages.

  • If you are a standalone customer, in the HREF text field, specify the full URL path to a linked web page.

Be sure you specify whether to open the link in a new browser tab (recommended default) or the same tab.

See Working with Selectors for more information.

• Select Experience Fragment.

  • If you are an Experience Manager Sites customer, select the Search icon (magnifying glass) to open the Experience Fragment page. Select the Experience Fragment you want to use, then select Select in the upper-right corner of the page so you can return to the hotspot management page.
    See Experience Fragments.

  • Specify the width and height of the Experience Fragment as it appears on the banner.

    note note
    NOTE
    The social media sharing tools in carousel banner are not supported when you embed the viewer in an Experience Fragment.
    To work around this issue, create viewer presets that do not have social media sharing tools. Such viewer presets let you successfully embed it in Experience Fragments.

You can also preview how the carousel banner appears. See (Optional) Previewing carousel banners.

Select Save.

Publish the carousel set. Publishing creates the embed code or URL that you can use on your website page. If you are an Experience Manager Sites customer, you can add the carousel set directly to your webpage.

See Publishing assets.

See Adding a carousel set to your website landing page

Do any one of the following:

• Hover over a Carousel Set asset, then select Edit (pencil icon).

• Hover over a Carousel Set asset, select Select (checkmark icon), then select Edit on the toolbar.

• Select a Carousel Set asset, then in the upper-left corner of the page select Edit (pencil icon).

To edit the Carousel Set, do any of the following:

• To add a slide, select the Add Slide icon then navigate to the asset you want to add to that slide and select the checkmark.
• To reorder slides, drag a slide to a new location (select the reorder icon to move items).
• To add a hotspot or image map, select the hotspot or image map icons and see adding hotspots and image maps.
• To edit the appearance or behavior of the carousel set, select the Appearance tab or Behavior tab, then set the options you want.
• To edit hotspots or image maps, on the appropriate slide, select a hotspot or image map and change as necessary under the Actions tab.
• To delete a slide, select it, then select Delete Slide on the toolbar.
• To apply a preset, near the upper-right corner of the page, select the Preset drop-down list, then select a viewer preset.
• To delete an entire Carousel Set, navigate to the Carousel Set, select it, then select Delete.

In Assets, navigate to an existing carousel banner that you have created and select to open it.

Select Edit.

In the viewer presets list in the right-hand corner of the toolbar, select a viewer to preview the carousel Banner.

Select Preview.

Select the hotspots or image maps on the image so you can test their associated actions.

Copy the published carousel set’s embed code.
See Embed the video or Image Viewer on a web page.

Add the embed code that you copied from Experience Manager Assets to your webpage.
The copied embed code is responsive so it must automatically fit the embedding area of the page.