Sliders and Faders with Visual Composer Image Gallery Element

Sliders and Faders with Visual Composer Image Gallery Element

Get a copy of the transcript of this guide (pdf)

sliders-and-faders-with-visual-composer-image-gallery-element

Use the back-end editor of the Visual Composer

sliders-and-faders-with-visual-composer-image-gallery-element-1

The image gallery element in the Visual Composer is a great little image slider. So, if you want to show a few images in a sequence, this is the way to do it.

Let’s try to add an image gallery element. First, click on the + icon to add an element inside a column.

Select Image Gallery element

sliders-and-faders-with-visual-composer-image-gallery-element-2

After clicking the + icon, an Add Element box will pop-up. Select the Image Gallery element. If you’re having trouble finding the Image Gallery element, proceed to the Content tab to filter out some elements that are not under Content.

Image Gallery Settings box will pop-up

sliders-and-faders-with-visual-composer-image-gallery-element-3

After selecting the Image Gallery element, its settings will pop-up. These are some properties that you can manipulate inside the Image Gallery Settings:

  • Widget title
  • Gallery type
    • Flex slider fade (fade in and fade out between the images)
    • Flex slider slide (shoots the images to the left as you progress between them)
    • Nivo slider (kind of tiled or column slide-up)
    • Image grid
  • Auto rotate – The number of seconds between the rotation.
    • 3, 5, 10, 15, and Disable
  • Image source
    • Media library
    • External links
  • Images
  • Image size
    • thumbnail
    • small
    • medium
    • large
    • full size
    • custom size (200×300, 450×320, and etc.)
  • On click action

To be able to select the images that we want to be added to our gallery, click on the + icon under Images property.

Add images to the gallery

sliders-and-faders-with-visual-composer-image-gallery-element-4

Let’s select three images to be added to our gallery. As you can see, at the bottom of the Add Images box, your selected images are also shown. If you want to clear your selection, you can click on Clear. If you want to upload the images that you want to select, click on the Upload Files tab. Once done selecting, let’s set our images by clicking on Set Images.

Save Changes

sliders-and-faders-with-visual-composer-image-gallery-element-5

As you can see, we have now added the images in our gallery. If you have no more changes, click on Save Changes then Close to close the settings.

Click on Preview Changes

sliders-and-faders-with-visual-composer-image-gallery-element-6

As you can see, inside the column is our image gallery. We can also see the images that we have set inside the Image Gallery Settings. To preview our changes, click on Preview Changes.

Output

sliders-and-faders-with-visual-composer-image-gallery-element-7

So this is a great way of doing a little image gallery in Visual Composer. You can manually slide the image by clicking on the black circles located under the image or you can also hover your mouse over the image and you can see an arrow to slide the images.