Sliding Bar Section For Widgets

This is the sliding section that can be enabled or disabled on any demo. You can insert anywhere from 1-6 columns along with any widget that comes with Avada, WordPress or additional 3rd party plugins. It's perfect for placing additional information on your site.

Recent Works

Contact Info

12345 North Street, New York City, NY 555555

Phone: 1-800-555-5555

Mobile: 1-234-567-8910

Fax: 1-234-879-5641

Web: http://yourwebsite.com

Loading...
Image Carousels 2016-12-09T02:48:59+00:00

Image Carousel Element

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. The below diagram shows you portions of why this element is so flexible and easy to customize to your liking.

Column Size & Spacing Control

The Image Carousel element gives you full control over column size and spacing which is so important for creative designs. Set the exact column size from 1-6 along with column spacing down to the exact pixel amount providing major creative freedom. The two examples below show you column size and spacing variations.

Navigation Control

The Image Carousel element allows you to display arrow navigation or hide the navigation. There is also a global theme option to control the navigation box and arrow size for more creative layouts, and you can choose to allow the mouse to control the scrolling of items.

Show Navigation

Each instance of the Image Carousel element can show or hide navigation.

Hide Navigation

Each instance of the Image Carousel element can show or hide navigation.

Mouse Scroll Navigation

Instead of traditional button navigation, you can choose to use mouse navigation. Try it!

Navigation Box & Arrow Size

Avada allows you to change the navigation box & arrow size globally giving you the freedom to create more modern and unique designs with easy to use options! (this is just an image and not a live carousel because currently the navigation box and arrow size option is a global setting and not individual, soon it will be individual also!)

Fixed Image size or Auto Image Size

Images you display have the option to choose if they are cropped to show the same width and height (fixed), or if they show the original image ratio (auto). Below are two exact same image carousel elements but the first one is auto, the second one is fixed.

Auto Play & Number of Images That Scroll At A Time

The Image Carousel element can be set to auto play on page load so your viewers automatically see all images in the element. In addition, you can set the items that scroll at one time. So you can set your images to scroll from one to six items at a time. See examples below!

Auto Play With One Item Per Scroll

Auto play turned on along with one image that scrolls each time the carousel moves.

Auto Play With Three Items Per Scroll

Auto play turned on along with three images that scrolls each time the carousel moves.

Border Control

Choose to show borders around your images. Displaying a set of client logos is a perfect situation to use this option as displayed below.

Image Hover Effects & Custom Links

Each Image Carousel Element allows the set of images to have a hover effect along with a custom link. Choose from Zoom in, Zoom Out and Lift up. Each image can have it’s own separate link along with a link target and image alt image text.

Zoom In Effect

Lift Up Effect

Zoom Out Effect

Open Images In The Lightbox

Images you display have the option to open up in the lightbox which has 6 different design skins along with various display options

Complete Set of Options

Every option and description included with the image carousel shortcode is listed below.

  • picture_size – Can be one of these values: fixed, or auto. Sets the image’s size to be fixed or not.
  • hover_type – Can be one of these values: none, zoomin, zoomout, or liftup. Sets the hover type for the picture.
  • autoplay – Can be one of these values: yes, or no. This will enable or disable autoplay.
  • columns – Can be one of these values: 1, 2, 3, 4, 5, or 6. Sets the maximum number of columns to display.
  • column_spacing – Accepts a numerical value to set the space between columns in pixels. For example, 35.
  • scroll_items – Accepts a numerical value to set the amount of items to scroll. For example, 35.
  • show_nav – Can be one of these values: yes, or no. This will show or hide the navigation buttons.
  • mouse_scroll – Can be one of these values: yes, or no. This will enable or disable mouse drag control. For easy draggability, when mouse scroll is activated, links will be disabled.
  • border – Can be one of these values: yes, or no. This will enable or disable the border around the images.

  • lightbox – Can be one of these values: yes, or no. Display the image in a lightbox or not.
  • link – The URL path where the image links to. For example, http://www.example.com/. If lightbox parameter is set to yes, the full image URL must be added to display it in a lightbox.
  • linktarget – Can be one of these values: _blank for new window, or _self for same window.
  • image – The URL path of your custom icon image, starting with http:// and usually ending on .jpg, .png or .gif. Allows you to combine them with column shortcodes to specify the size.
  • alt – The custom alternative text that will be displayed if an image cannot be viewed.
  • element visibility – Choose to show or hide the element on small, medium or large screens. Show them on all, or just some, givine you full control over all screen sizes. Each screen size also has a custom width setting in Fusion Theme Options.

  • class – Add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.

Join The 340,000+ Satisfied Avada Users!

BUY AVADA NOW!