Categories

Featured templates

JS Animated. How to change Camera slider speed, effect and other options

Sean Right September 22, 2014
Rating: 4.3. From 6 votes.
Please wait...

We are proud to present a new video tutorial on Camera Slideshow, a popular jQuery plugin, often used by our template developers for the sliders.

JS Animated. How to change Camera slider speed, effect and other options

Sometimes you might want to experiment with the slider animation. In this tutorial we’ll take a quick glance at some of the options and features of the Camera slideshow script such as autostart, speed and transition effects.

So, open camera.js file inside "site/js" folder with a text/code editor, such as Notepad++, and let’s get started!

NOTE: some options that you see in camera.js file may not be active in your template. It depends on a particular page layout, applied CSS rules, scripts, etc.

Automatic start

autoAdvance option defines whether the slider starts playing automatically.

To enable the automatic start, use:

autoAdvance = true;

To disable the automatic start, use:

autoAdvance = false;

Speed

There are 2 options for slider speed: time and transPeriod.

time defines the period of time between slide transitions. In other words, that’s the amount of time for displaying each slide in miliseconds.

transPeriod – the length of the transition effect in milliseconds.

Example:

time: 7000,
transPeriod: 2000,

The above code will make slides display for 7 seconds, and transition between slides will last 2 seconds.

Transition effects

Use fx option to change, add or remove transition effects.

To combine effects, separate their names with commas.

Example:

fx: 'simpleFade, mosaic',

This will randomly apply simpleFade or mosaic effect to slider transitions.

Number of rows/columns

Some effects, such as mosaic, use 2 options for number of rows and columns.

Example:

cols: 6,
rows: 4,

For more features and examples read the comments inside camera.js file or visit the Camera slideshow developer’s site.

Thank you for reading. Feel free to rate this article and let us know if you have any questions.

Feel free to check the detailed video tutorial below:

JS Animated. How to change Camera slider speed, effect and other options
This entry was posted in JS Animated tutorials and tagged camera, change, default, options, set, slider. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

Live Chat
We help you to choose the right product.