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

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.

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:

Website Speed Optimization Service

Providing website visitors with the best possible user experience is crucial. It helps to retain visitors and attract new ones. There are several factors, that affect the rate of visitors. Your website has to be filled with useful content. In other words, a visitor has to find the necessary information on your website. Another important factor is the website loading speed. All the content and elements should load as fast as possible. A user doesn’t want to wait too long. Poor website performance affects visitors’ behavior negatively. It’s quite simple. A user may think “I can find this content somewhere else” and they leave your website.

Website optimization becomes even more important if you have an online store. That’s the case when everything should work fast and properly. Website optimization isn’t easy. It’s challenging if you have much content (like images, videos, audio files, etc.) and many elements, like plugins or widgets that make your website easier to use. Luckily, our team can help you out. We can optimize your website to decrease the time necessary to load all the necessary elements. The optimization process is focused on:

• Content
• Database
• Source file minimization
• Compressing
• Caching

The optimization process can greatly decrease the time a visitor needs to load the page. It improves user experience and it can facilitate website management as well. The optimization service is performed by our professionals, who know how to make your website work more efficiently. Our team works with CMS websites and online stores.

You don’t need to worry about anything. You just need to provide us with the necessary information so we can start optimizing your website right away. You can also check the progress using the project manager. The optimization process doesn’t take much time – 3 business days for CMS and 5 business days for online stores. We also provide you with a detailed report that shows the result of the optimization process. You can also ask for additional optimization.