Question:

We have purchased the enterprise version today. Need you help with an issue.

We are trying to initialize the slider dynamically on a button click. In this case the content of a div are loaded as below on the button click and we want to initialize the slider after that. Can you please help in how to do that?

Answer:

A demo for this question is at https://amazingslider.com/demo1/index.html.

To check the code, in Google Chrome, you can click menu View -> Developer -> View Source, and view the source code.

To dynamically initialise the slider after the page is loaded and in a button click, you can take the following steps:

1. In the head section code, remove the reference to initslider-1.js. It’s because the slider is initialised in the JavaScript file initslider-1.js.

2. Define a JavaScript function initSlider in your webpage, and copy the code block jQuery(“#amazingslider-1”).amazingslider from initslider-1.js to this function. When copying the code, please make sure it’s copied correctly and isn’t broken.

In the code, amazingslider function call, there is a parameter jsfolder, which is the folder of the file amazingslider.js located. You need to replace the value to your own value. In our demo, we have change the code from:

jsfolder:jsFolder,

to:

jsfolder:"https://amazingslider.com/demo1/sliderengine/",

It’s because in our demo, the amazingslider.js file is located at https://amazingslider.com/demo1/sliderengine/amazingslider.js.

3. Call the function initSlider in the button onclick event:

<button id="initbutton" onclick="JavaScript:initSlider();">Initialise and display the slider</button>