Slideshows

Creating slideshows

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Slideshows

Creating a slideshow

The Slider Images menu option on the left is where you create a Slideshow. To add a new Slideshow, select the Slider Images > Slideshows option from the left hand WordPress menu. When you create a new Slideshow, you need to specify the Name, Slug, Parent and Description of the slideshow. Then, you can add Slider Images to it.

Adding slideshow items

The Slider Images menu option on the left is where you add Slider Images. To add a new Slider Image, select the Slider Images > Add New option from the left hand WordPress menu. When you create a new Slider Image, you need to setup two more options.

slideshow

  • Link Type: same as Portfolio Items.
  • Slideshow Image: set the featured image to be used as a slider image.


Take a look at the video on how to create a slider image :

Slider Images open with Magnific Popup

In order to make a slider image linkable and open in magnific popup, you need to do the following:

  • Go to Slider Images from the admin sidebar and edit a slider image.
  • Scroll down to the Link Typeoption and select URL.
  • Set the URL Linkto be the url of the image that will popup.
  • Set the Open Link Inoption to be 'Open in magnific popup'.

Adding Slideshows to a page

If you wish to add a slideshow to your page, once you have created an empty row, follow these steps

  • press the Add element button of the Visual Composer and choose the Slideshow element. Now you can edit the Slideshow

slideshow

  • Choose a Flexslider: populate your slider with one of the slideshows you have created.
  • Animation style: select how your slider animates.
  • Direction: Select the direction your slider slides.
  • Speed: set the speed of the slideshow cycling, in milliseconds.
  • Duration: set the speed of animations.
  • Auto start: start slideshow automatically.
  • Show navigation arrows: show or hide the navigation arrows.
  • Item width: set the width of the slider items( leave blank for full ).
  • Show controls: show or hide the controls.
  • Choose the place of the controls: Inside or Outside the slider images.
  • Choose the alignment of the controls: sets the alignment of the controls.
  • Controls Vertical Position: sets the vertical position of the controls.
  • Show Captions: show or hide the captions.
  • Captions Horizontal Position sets the horizontal position of the captions.
  • Show Tooltip: show or hide the tooltip.
  • Margin Top: amount of space to add above this element.
  • Margin Bottom: amount of space to add below this element.
  • Scroll Animation: animation that will occur when the user scrolls onto the element.
  • Animation Delay: Delay after scrolling onto the element before animation starts.
  • Extra Classes: Add any extra classes you need to add to this element. ( space separated )



Take a look at the video on how to add a slideshow to a page: