Carousel Slider
Inserting a Carousel Slider Section
A Carousel Slider allows for multiple slides being shown at once, from 2 to 6 slides. Each slide can be linked to a page or lightbox.
Step 1: Switch To Backend Editor
To insert a Carousel Slider section, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:
Step 2: Select Slider
Click "Carousel Slider" in the Visual Composer Modal to insert a Carousel Slider section, for example:
Step 3: Edit Carousel Slider Section Settings
Once the Carousel Slider section element has been inserted click the Edit Link(pen icon) of the Carousel Slider section wrapper, for example:
Here is an overview of available slider section options:
-
Visible Slides
Determines the number of visible slides at any given time. Defaults to 4 slides.
-
Extra Class Name
If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.
-
Advance Automatically
Determines whether the slider should auto advance from slide to slide i.e. slideshow.
-
Auto Advance Interval
Determines the interval at which the slider will auto advance.
-
Pause On Hover
Determines whether auto advancing should pause upon hover.
-
Progress Bar
Determines whether the interval progress bar should be shown.
-
Use Navigation Arrows
Determines whether the slider should have navigation arrows.
-
Use Pagination
Determines whether the slider should have pagination bullets.
-
Show Navigation on Hover
Determines whether the slider navigation arrows and pagination should only appear upon mouse hover.
-
Pagination Color 1
Sets the default pagination color of the slider.
-
Slider Transition Easing
Determines the easing type of the slider transitions.
-
Slider Transition Speed
Determines the transition speed of slide transition.
Step 4: Edit Slides
Once you have edited the slider wrapper settings, click the Edit Link(pen icon) of the slide you wish to edit, for example:
Here is an overview of available slide options:
-
Slide Title
Sets the title of the slide.
-
Slide Description
Sets slide caption description.
-
Uploaded Image
Upload slide image.
-
Link Image
Determines what the image should link to, either: None, Link to image or Use lightbox. Here is a breakdown of each and their dependent options:
-
Image is inserted without being linked.
-
Link URL
The URL of the image to which the image should link to.Note: This need not be the same URL of the image you are inserting into your content, this could be the URL of a different or larger version of the image in question.
-
Group ID
Associate an image to a specific lightbox group. This will allows user to browser through grouped image in the lightbox.
-
Lightbox Toolbar Zoom Button
Whether the lightbox media should be zoomable.
-
Lightbox Toolbar Share Button
Whether the lightbox media should be sharable through Facebook, Twitter and Google+.
-
Lightbox Caption
The lightbox media caption. Leave blank if no caption is wanted.
-
-
Caption
The image caption that either appears below, over or as a rollover caption.
-
Extra Class Name
If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.
-
Caption Type
Whether caption should appear below the image, over the image or as a rollover caption.
-
Caption Vertical Alignment
Whether caption should be vertically aligned top, middle or bottom. This only takes effect if you are using an overlayed or rollover caption.
-
Caption Horizontal Alignment
Whether the caption should be left, center or right aligned. This takes effect for all caption types.
-
Lightbox Caption
The lightbox media caption. Leave blank if no caption is wanted.
-
Color Options
Rollover Background Color
Caption Text Color
-
Animation
Determines the lightbox animation. Note: this option will only appear if the Link Image option is set to "Use Lightbox".
Can't find what you're looking for? Submit a request in our forum.