Slideshow Particle

Create a responsive image or video slideshow with stunning transition effects, fullscreen mode and overlays.
Installing the particle on your website is a really simple process. You just need to follow the below instructions depending on the platform you are on.
Version: 1.0.0 | Changelog | Buy Now

Joomla Installation

Step1 Unzip the package slideshow.zip.

Step2 Copy all the contents inside folder slideshow to custom folder which located at

root/templates/TEMPLATE_NAME/custom/

Step 3 Add the following code below

@import "slideshow";
in your custom.scss file. If the custom.scss file does not exists, you will need to create it manually. The custom.scss file located at
root/templates/TEMPLATE_NAME/custom/scss/custom.scss

Also, make sure your custom.scss file has the @import "dependencies"; code at the very top. Basically, this step is the same as the one described in the Adding a Custom Style Sheet chapter in the Gantry 5 Documentation.

Video Tutorial

Still don’t know what to do? Watch the video below! It will show you all the steps in details. The video is installation for flipster card particle in JOOMLA but the steps are the same. ( Remember to change the directory if you are using WORDPRESS ).

WordPress Installation

Step1 Unzip the package slideshow.zip.

Step2 Copy all the contents inside folder slideshow to custom folder which located at

root/wp-content/themes/THEME_NAME/custom

Step 3 Add the following code below

@import "slideshow";
in your custom.scss file. If the custom.scss file does not exists, you will need to create it manually. The custom.scss file located at
root/wp-content/themes/THEME_NAME/custom/scss/custom.scss

Also, make sure your custom.scss file has the @import "dependencies"; code at the very top. Basically, this step is the same as the one described in the Adding a Custom Style Sheet chapter in the Gantry 5 Documentation.

Usage

All particles are very easy to use. All the options in partice have a tooltip text to show you what they do. You can watch the usage video below if you are confusing and don’t know what to do next.

General Setting Description
Height Defines the slideshow height (leave 0 to use auto).
Fullscreen Extend the Slideshow to full viewport height.
Autoplay Defines whether or not the slideshow items should switch automatically.
Interval Defines the timespan between switching slideshow items (millisecond).
Show arrows Show back and forward navigation arrows.
Navigation type Select the navigation type.
Navigation Alignment Select the alignment of the navigation.
Navigation on Top Place the nav on top of your Slideshow content.
Animation Select the animation.
Animation duration Defines the transition duration. (millisecond).
Kenburn Effect Select the Kenburn Effect (If enable, overide the animation).
Animation duration Defines the kenburns animation duration. (second).
Video Autoplay Defines whether or not a video starts automatically.
Video Mute Defines whether or not a video is muted.
Overlay background Add a background to the overlay.
Overlay Postion Select the Overlay postition.
Overlay Vertical Align Select the Overlay Vertical Align.
Overlay Horizontal Align Select the Overlay Horizontal Align.
Overlay Transition Select the Overlay transition.
CSS Classes CSS class name for the particle.

Item Setting Description
Slideshow Type Select the slideshow item type.
Image Select image for the slide (will be used as thumbnail for other item type).
Video Select video for the slide.
Custom content Enter custom content (custom HTML).
Overlay Heading Enter the heading for the slide (Custom HTML).
Overlay Content Enter the content for the slide (Custom HTML).
Overlay Button Text Enter the button text for the slide.
Overlay Button Link Enter the button link for the slide.
Overlay Button Class Enter the button class for the slide.

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match

50% OFF on everything at JoomLead, coupon: JL50 Buy Now
50% OFF on everything at JoomLead, coupon: JL50 Buy Now