Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
How to make Carousel Widget auto scroll?

How to make Carousel Widget auto scroll?

The Carousel Widget allow you to turn on the auto scroll of you choose. This tutorial will show you how.

Getting Started

In your download package, you will find the JS folder. Inside you will find the following files:

dt-carousel-1.js

dt-carousel-2.js

dt-carousel-3.js

dt-carousel-4.js

dt-carousel-5.js

These files determine how the carousel widget functions. You can have up to 5 carousel widget per page. Each carousel have its own js file to control how it function. So depending on the number of carousel you have in your page, you will edit different d-carousel-X.js file.

For example, I only have one carousel on my page. The js file I will be editing will be dt-carousel-1.js. For another example, if I have 3 carousel on my page and I only want to turn on the auto scroll function in carousel number 2, I will edit the dt-carousel-2.js.

 

Open JS file

Once you have determined how many carousel you have and which one you want to edit, open the file using NOTEPAD for PC users and TEXTEDIT for MAC users. You can also download a free text editor called Sublime to avoid using the wrong program. Please note if you use the wrong program to open the file, the code inside will be corrupted. So before editing the file create a copy on your desktop.

When you change the scroll setting it will apply to all of the carousel in your website.

 

Turn on Autoplay

In the file locate this code:

auto : false,

To turn on auto play, simply change “false” to “true” like this:

auto : true,

 

Save & Upload

Save the file as the SAME name on your desktop. DO NOT override the default file. If you make a mistake, you will want to have the default file to go back to and start again.

Upload the new js file in your Code Editor and re-publish you website.

 

Tags: