Block Types: Carousel

What is a carousel block? 

The Carousel block type rotates through images that you have selected on your website. 

DistributorCentral's carousel block has some of the following customization features: 

• Animation Type
• Slide Loop Option
• Display Type
• Links
• Captions

How to add a Carousel block: 

1. In the the website editor, go to the panel on the left and find Current Page
2. Under Current Page, click the + icon to the right of the row you wish to add the Carousel
3. In the Select Block Type pop up window, click on Carousel
4. After you have clicked on the Carousel block, the pop-up window will disappear, and you will see the new block added last in the row under the left panel, and it will be highlighted in blue 

How to edit a Carousel block:

1. In the left-hand panel, find the Carousel block
2. Click the pencil icon to the right of Carousel
3. The Carousel editor window will pop-up
4. Within the Carousel editor you can change settings and add slides

Settings

• Autoplay: 
  • You can choose to have the images in the Carousel rotate automatically, or manually.
    
    • If the carousel is set to Yes, your Carousel will rotate on its own after a specific delay time, but your customers will also be able to click through the images by using the arrows on the right and left of the Carousel block. 
    • If this is set to No, the images will only rotate if your customer has clicked on the arrows to cycle through. 
• Autoplay Delay: 
  • Determine how long the the delay is between each image rotation. You can choose anywhere from 1 - 20 seconds of a delay.
• Open links in new window:
  • If you have added links to the images in your carousel, select whether the link should open in a new window, or change the in current window. 
• Animation Effect: 
  • Select the animation type you would like to use. Choose from Slide, Cube, Coverflow, or Flip.
• Loop through slides:
  • If you want your customers to be able to continuously click through your slides, select Yes. By choosing No, once all the slides have been displayed, the last slide will stay on the screen and clicking the Next arrow will not take you back to the first slide.
• Adjust Height:
  • Select whether you would like the carousel block to match the height of the active slide displayed. The default selection is No, meaning the carousel block will match the largest image size in the carousel slides.
  • **NOTE** This preference is relevant if you have different image sizes in your carousel, however, it's highly recommended to use the same size images for best results. 
• Show pagination bullets:
  • Choose Yes to display the navigation bullets to the bottom of your carousel to allow your customers to move from one slide to another manually. Choosing No will hide the buttons from view.
• Show next/previous arrows:
  • Choose Yes to display the next and previous arrows to the right and left of your carousel block. These arrows allow your customer to move the slides one by one. Choose No to hide them from view.

Adding Slides

• Display Type: 
  • You can choose the slide display type you prefer. Select from the following: 
  • Image with Caption - Display the slide with a custom caption on top of the image slide.
  • Image Above Custom HTML** - Add custom HTML to be displayed below the image slide.
  • Custom HTML Overlaid on Image** - Add custom HTML to be displayed on top of the image slide.
  • Custom HTML** - Add custom HTML without and image slide. (i.e. testimonials)

** Custom HTML is an advanced feature. You MUST know HTML to use this feature.

• Adding Images: 
  1. Start adding the images that are to be rotated in this carousel by clicking the Add image button.
  2. Then click the Pick Image thumbnail to select from your image library.
  3. Click on the image you want to add. 
  4. Once the image is added, you can add a Caption Title, Caption Body, Custom HTML, or Pick Link from your link library. 
  5. You can change the images of these by clicking on the image thumbnails, or click the Remove Slide button to the top right of each image. (you cannot remove the first image from the block)

  PLEASE NOTE: You are not limited to a number of images, but you cannot drag and drop to re-sort the images once they are added. You have to edit each image placeholder until the images are in the correct order.

• Delete block: 
  • The red box with a trash icon in the bottom left corner of the window will delete the Carousel block altogether. 
• Done:
  • Click Done to close the Carousel block editor.
    
    You will need to click Save in the website editor to save the changes made to the Carousel block.