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>

Question:

I’ve bought your company’s product.

My situation is I have two section which are video slide section and picture gallery section. Once video is selected, i want to show pictures which are related to the video. To do that, i need to know which video is selected. However, i don’t know where to get that in amazingslider.js

Could you please help?

Answer:

You can hook the event amazingslider.switch of the video slider, then in the event handler, you can call the API of picture slider to switch to the specified image.

The code is like following:

$(document).ready(function(){
   $("#amazingslider-1").bind("amazingslider.switch", function(event, previous, next){ 
      
       $("#amazingslider-2").data("object").slideRun(next, false);
   });
});

In the above code, amazingslider-1 is the id of the video slider. amazingslider-2 is the id of the picture slider.

Question:

Is there an event for Amazing Slider when slide changes?

Answer:

Yes.

$(document).ready(function(){
   $("#amazingslider-1").bind("amazingslider.switch", function(event, previous, next){ 
     console.log("previous:" + previous);
     console.log("next:" + next);
   });
});

In the above codes, the amazingslider-1 is the div ID of the slider. If you have specified a different ID in the publish dialog, you need to change the number accordingly.