Carousel

Carousel is a built-in tool that allows end-users to insert a rotating slider (image carousel) into their designs. This tool is supported for both display modes: emails and web pages. For email designs, carousel is only supported with AMP enabled.

Usage

Enabling Carousel tool is a bit different than other built-in tools. Follow the steps below to enable and preview Carousel tool in your designs.

For Email Designs (AMP Required)

For email designs, the carousel tool requires AMP to be enabled:

• Enable AMP for Carousel tool in the Builder Configuration: To activate AMP, set the amp flag to true in the unlayer.init() function or the options prop if you're using the React component.

  Here’s the code for reference.

  JavaScript Example:

  unlayer.init({
    id: 'editor-container',
    projectId: 123456, // replace with project ID with yours
    displayMode: 'email',
    version: 'latest',
    amp: true,
  });

  React Example:

    <EmailEditor
      ref={emailEditorRef}
      onReady={onReady}
      minHeight="90vh"
      options={{
        projectId: 123456, // Replace with your actual Unlayer project ID
        displayMode: “email”,
        version: 'latest',
        amp: true,
      }}
    />

• Use the Preview Mode to see Carousel in action: You can preview the carousel tool within the builder by toggling the AMP Preview button in the editor UI.

  

• Exporting HTML for Carousel functionality: To export the HTML for Carousel tool, use the exportHtml() function with the { amp: true } option. This will return both standard and AMP-compliant HTML in the export payload.

  unlayer.exportHtml(
    function (data) {
      var json = data.design;
      var html = data.html;
      var ampHTML = data.amp.html; // extract the HTML with AMP
  
      console.log('Design JSON:', json);
      console.log('Design AMP HTML:', ampHTML);
      console.log('Design HTML:', html);
    },
    { amp: true }, // enables AMP in the HTML output, used for Carousel tool
  );

For Web Page Designs

For web page designs, simply set the displayMode to web in your builder configuration:

JavaScript Example:

unlayer.init({
  id: 'editor-container',
  projectId: 123456, // replace with project ID with yours
  displayMode: 'web',
  version: 'latest',
});

React Example:

<EmailEditor
  ref={emailEditorRef}
  onReady={onReady}
  minHeight="90vh"
  options={{
    projectId: 123456, // Replace with your actual Unlayer project ID
    displayMode: 'web',
    version: 'latest',
  }}
/>