Image Carousel Element

07/08/2019

The Image Carousel Element is perfect for showcasing a set of images, your portfolio pieces, client logos and much more. The customization options it offers give you incredible flexibility to choose how it looks, works, and interacts with the user. Read below to discover more about this useful visual element.

How To Use The Image Carousel Element

The Image Carousel Element allows you to add beautiful image carousels to you website, with a minimum of fuss.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 – Select the container and column you would like to place the image carousel into.

Step 3 – Click on the + Element button at the bottom of the column. Select Image Carousel.

Step 4 – The options on the right hand side are Parent Options, and affect the entire carousel. This is a relatively simple element with some basic styling options, but make sure to view the Image Carousel Element Demo page, to appreciate the different layouts and options on offer. The first two options relate to the images displayed on the carousel. Firstly, you need to select or upload the images you want to use, and then choose their size. The Bulk Image Upload option allows you to add all the carousel images in one go, instead of one at a time from the child options. Simply choose the images you want to add by clicking on Select Images and choosing images already in your Media Library by using the Cmd / Ctrl key, or by uploading and selecting new ones (these will be auto selected). Once you have finished your selections, click Insert into Page. With the fixed size option, a fixed width and height are used, and so, if images chosen have a different aspect ratio, or orientation, they will be cropped, so that all thumbnails have the same size. With the Auto option, the width and height will adjust to each image. For best results using the image carousel, it is recommended that you use images of the same size and orientation, to avoid cropping and unusual layouts.

Step 5 – The remaining parent options are styling options, like the Hover type, whether the carousel should autoplay, the maximum number of columns on the screen, as well as some spacing, scrolling and border options. There is also an option for the individual carousel images to open in a Lightbox.

Step 6 – Once you have set all your Parent Options, you add Child Items on the left. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. In this Element, this is a very simple section, where you can edit each image for the carousel, or add new ones. Each image can link to a url if you wish, and there are options for the image links to open ina  new window, and you can add alt text to each image.

Step 7 – If you wish to add additional images to the Image Carousel, you can then duplicate existing, or add new images by clicking on the Clone Item icon, or the + Image button respectively.

Step 8 – Once you have completed adding your images, click Save. You will be returned to the edit page. You can preview the page to view your carousel, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Carousel Elements section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Parent Options

  • Bulk Image Upload – This option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time.

  • Picture Size – Choose the Picture size. Select from Fixed, or Auto. Fixed = width and height will be fixed. Auto = width and height will adjust to the image.

  • Hover Type – Select the image hover type. Choose from none, Zoom In, Zoom Out, or Lift Up.

  • Autoplay – Select whether to autoplay the carousel. Choose from Yes, or No.

  • Maximum Columns – Select the number of max columns to display. From 1 – 6.

  • Column Spacing – Insert the amount of spacing between items without “px”. ex: 13. From 0 – 300.

  • Scroll Items – Insert the number of items to scroll. Leave empty to scroll the number of visible items

  • Show Navigation – Choose to show navigation buttons on the carousel.

  • Mouse Scroll – Choose to enable mouse drag control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.

  • Border – Choose to enable a border around the images.

  • Image lightbox – Show image in lightbox. Lightbox must be enabled in Theme Options or the image will open up in the same tab by itself.

  • Element Visibility – Allows you to choose which devices to display the element. Choose one or more from Mobile, Tablet, or Desktop. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab in the Theme Options.

  • CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

  • CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

Add / Edit Settings

  • Add / Edit Items – This is where all your child element’s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

  • Edit Item Icon – Allows you to edit an item.

  • Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

  • Delete Item Icon –  Allows you to delete an item.

  • Re-order Feature –  Allows you to drag and drop the item to your desired order to rearrange them. A small thumbnail of the image is shown to assist you in this.

  • Add New Image Button –  Allows you to add a new Image.

View The Options Screen

Child Options

  • Image – Upload an image to display.

  • Image Website Link – Add the URL the image should link to. If the lightbox option is enabled, you can also use this to open a different image in the lightbox.

  • Link Target – Select whether to open the link in the same browser tab (_self) or in a new tab (_blank).

  • Image Alt Text – The alt attribute provides alternative information if an image cannot be viewed.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Carousel Elements. These global element options control all elements that use a carousel.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

  • Carousel Navigation Box Color – Controls the color of the navigation box for carousel sliders.

  • Carousel Hover Navigation Box Color – Controls the color of the hover navigation box for carousel sliders.

  • Carousel Speed – Controls the speed of all carousel elements. ex: 1000 = 1 second.

View The Options Screen

Image Carousel Element Parameters

Copy to Clipboard

Parent Settings

    • Bulk Image UploadThis options is only available in the Fusion Builder interface and not as a shortcode param. This option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time.
    • picture_size – Choose from fixed, or auto. Choose fixed to use the width and height of the container, or choose auto to use the image’s original resolution.
    • hover_type – Choose from none, zoomin, zoomout, or liftup. Sets how the image responds on hover.
    • autoplay – Choose from yes, or no. Enable or disable autoplay.
    • columns – Choose from 1 – 6. Sets the number of columns to display.
    • column_spacing – Accepts a numerical value. For example, 35. Sets column spacing.
    • scroll_items – Accepts a numerical value. For example, 35. Set the amount of items to scroll. Leave empty to scroll though the number of visible items.
    • show_nav – Choose from yes, or no. Show or hide navigation buttons.
    • mouse_scroll – Choose from yes, or no. Enable or disable mouse drag control. If this is enabled, links will be disabled.
    • border – Choose from yes, or no. Enable or disable image borders.
    • lightbox – Choose from yes, or no. Enable or disable the image’s lightbox feature.
    • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
    • class – Add a custom class to the wrapping HTML element for further css customization.

    • id – Add a custom id to the wrapping HTML element for further css customization.

    Child Settings

      • link – The URL path where the image links to. For example, http://www.example.com/. If lightbox is enabled, use the uploaded image’s URL to display it in a lightbox.
      • link_target – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
      • image – URL path of your image. For example, http://www.sample.com/image.jpg.
      • alt – The alternative text that will be displayed if the image can’t be viewed.