First, the old school method. Just download the files.

The minified file:
jquery.anyimagecomparisonslider.min.js

And for those who are interested in the non-minified version:
jquery.anyimagecomparisonslider.js

Just click on the links. You will be directed to the corresponding file. Now click on file in your browser menu and then click on "save as..." or on "save page as..." and save the file in your project folder.
Or simply use the key combination CTRL + S to save the file.

Install it via Package Managers:

After you have downloaded the file and placed it in your project, you just have to embed it in your page:

Please note, if you want to use the slider together with jQuery, then implement the slider script behind jQuery:

jquery.anyimagecomparisonslider.min.js & jquery.anyimagecomparisonslider.js are also available on jsDelivr via npm and can be embedded per CDN.

Or the short form:

After we learned how to integrate the default slider into your site as fast as possible in the Quickstart section, we now also know how to download and install the files. Let’s go a little deeper into detail and deviate from the standard configuration before we look at all configuration options in detail.

This is almost the same slider as in the Quickstart. However, it is configured in such a way that the behavior has changed almost completely.
In addition, this and all subsequent sliders in the examples are initialized by JavaScript/jQuery.

To understand how to configure the slider with attributes or parameters, let's first look at the complete HTML code.
Then we will look at all possible parameters in detail.

First we insert the HTML code for our slider again at the desired position in our page.

At first glance, the HTML code looks almost the same as in the default example. But if we take a closer look we can see two differences. First, we pass various data attributes with parameters for the slider. And second we added another div to set the buttons in the slider.

Here you can see the data attributes used for this slider in detail.

The exact configuration of the slider with attributes and parameters is described in the chapter Configuration.

The following code creates the two buttons in the slider. With these buttons the user can easily download the images used in the slider.

The buttons must be placed inside a div with the class ui. In addition, the buttons themselves should always use one of the following classes so that they are correctly recognized by JavaScript.

Let's now continue with the initialization.
Besides the automatic initialization without a single line of JavaScript/jQuery code and using the words aics and autostart in the id of the slider, there is the ability to initialize the slider yourself.
There are two possibilities depending on whether you want to work with pure JavaScript or jQuery.

Good job! You have successfully added and initialized your first self-configured Any-Image-Comparison slider to your site.

Please note that if you do not want the slider to initialize automatically, don't use a combination of the words aics and autostart in the slider id.
In the following examples we always use the non-automatic initialization as shown here.

In this chapter we will take a close look at the slider in all its facets, its settings and public methods.

We already know the basic structure from the Quickstart chapter and the short introduction. Now, let's have a closer look at all possible variations.

Let's start with the easiest one:

At this point we create the div element for our slider and set the id (aics) for this element so that we can access it in JavaScript/jQuery to initialize the slider.
Furthermore, in our slider div element we create another div element with the class images.
And in this images div we create two more divs for the images of the slider:

Each of the two div elements for the images must have one of the following classes:

And with the attribute data-src you define the file path:

Optional: We can even add two more attributes to the div elements for the images:

1200 and 900 are example values only. At this point you simply pass the values for the original width and height of the images.
For example, if your original image is 900 * 600 pixels in size, unlike the images used here, you would pass the following values:

A standard slider with these optional attributes would look like this:

But why should you assign these optional attributes at all?
Because this way the slider element can already be displayed in its final size without the slider having been completely loaded or initialized.
This way you avoid unpleasant jumping effects on the page when your sliders have to be loaded first and can only take on their final size afterwards.

As we have already seen in the second example, we can add buttons to the slider to download the images used in the slider:

Therefore, we need a div with the class ui which we place inside the slider div:

In this ui div we now create our buttons. The buttons themselves should always use one of the following classes so that they are correctly recognized by JavaScript:

Of course you can also specify the button label, set an alt text and set the target so that a click on the button opens a new browser tab.

But we can do even more in the ui div:

We can add an img element with the class dragger. If this element is present, the slider automatically places it in the middle of the separator. At this point you can use any image you like. Don't forget to specify the width and height of your image:

And this is the complete markup for a horizontal slider:

And here - for comparison - the markup for a vertical slider:

Now let's again look at the markup for a slider that works without initialization in JavaScript/jQuery:

The naming of the slider id plays the decisive role here:

If you want your slider to be initialized automatically, you have to make sure that the name of the slider id contains the words aics and autostart.
The order or additional other words in the slider id are irrelevant.
The following Slider id for example also works so that the slider is automatically initialized:

On the other hand, if you want to avoid that the initialization takes place automatically just avoid the word autostart in the slider id.

Enough slider markup! In the next step we will look at how to configure the slider.

And now we have a closer look at how you can configure the slider using data attributes. In the Introduction chapter we could already get to know some attributes. But now it´s time to get to know them all.

These are all available data attributes with their default values:

Let's take a closer look at the data attributes and how they work:

Example: A slider with all possible data attributes and their default values.

But there is another way to configure your slider. This is done with a settings object that you pass during initialization in JavaScript or jQuery.

These are all available object properties with their default values:

As you have seen, the object properties correspond exactly to the data attributes.
With one exception (onReady). onReady can only be used in conjunction with the settings object and its properties.
But let's take a closer look at the object properties as well:

Now you know all properties of the settings object and can create your own settings object. The next step is to pass the settings object you just created:

Since in this example we configure everything via settings object, we do not need any data attributes.

Just a hint. The data attributes take precedence over the settings object properties. That means, if you want to use both attributes and object properties (which makes no sense in my opinion), the properties will be overwritten by the attributes with the same name.

No matter if you use the data attributes or the settings object properties. Thanks to an extensive error handling the any Image Comparison Slider helps you in case you have passed a parameter incorrectly. If the slider does not work as desired, it is worth checking the browser console to see if there is an error message that can help you to analyze the error.

Let us now continue with the slider's public methods and take a closer look:

Note: Please note that some of the methods will not work correctly until the slider is fully loaded and initialized.
In case you want to use certain methods it is recommended to use the onReady callback function to wait until the slider is fully loaded and initialized.

And here are the examples how you can call the methods in JavaScript and jQuery.

There is so much more to discover. But we have the most important points now. Everything else in the Examples chapter.

In this example we go a step further and create 2 sliders that control each other.

Here we will focus our attention especially on 3 setting options.
The first thing we have to do is make sure that the two sliders are in one group (As a practical example we choose the value g3 as group name).
We do this either by data attribute:

Or we can do it using the settings object and the property group:

Next we need to make sure that the sliders are allowed to control other sliders in their group and let other sliders in their group control them. As always there are 2 possibilities for this, which I will not mention every time from now on:

The following is optional. However, it is generally useful for grouped sliders. We synchronize the sliders with each other so that all sliders in the group start at the same time:

And here is the complete code for this example:

Let's go ahead and increase the number of controlling sliders to four. Another new feature is that two of the sliders are now vertically aligned and receive a special mouse cursor.

As in the previous example we have to make sure that the sliders are in the same group and can control each other:

In addition to this, we now make sure that two of the sliders are vertically aligned:

Now we define a different mouse cursor for the vertical sliders:

Also in this example we want all sliders from this group to be synchronized:

So much for the special features. Here's the complete code:

Now things are getting a little crazy. We take it to the extreme and combine nine sliders into one group. Some of the sliders are aligned horizontally, others vertically. The slider in the middle, i.e. slider number 5, may control all other sliders, but cannot be controlled by other sliders. All other sliders are synchronized.

Everything we need for this example we already know from the previous two examples.
Also here we have to make sure that the sliders are all in one group:

We are making sure that the sliders are allowed to control other sliders and let the other sliders of the group control them:

Only for the middle slider, slider number 5, we change the settings a little bit:

Also in this example we want all sliders from this group to be synchronized:

Here is the complete code for this example:

In this example we see again two sliders that control each other. The special feature here is that the control is reversed.

As in the previous examples we have to make sure that the sliders are in the same group and can control each other. In this particular case we also want to achieve that the control is reversed by the other slider:

Also in this example we want all sliders from this group to be synchronized:

So much for the special features. Here's the complete code:

In this example we again add the ui element in the slider markup which allows us to add custom controls to the slider.
And furthermore, we give the slider a different style and hide the mouse cursor.

Let us first take a closer look at the ui element in the slider markup.
In the div with the class ui we can add an img element with the class dragger. If this element is present, the slider automatically places it in the middle of the separator. At this point you can use any image you like. Don't forget to specify the width and height of your image:

For styling the dividing line and hiding the mouse cursor you have two options.
We do this either by the data attributes data-cursor and data-dividing-line:

Or we can do it using the settings object and the properties cursor and dividingLine:

And here is the complete code for this example:

This example is based on the previous example and is intended to show further possibilities for customizing the slider.
To do so, we change the orientation of the slider from horizontal to vertical, insert a different mouse cursor and use CSS to make our dragger element visible outside the slider.

Because this slider has a vertical orientation we need a different image for our dragger element at this point:

We change the orientation and the mouse cursor of the slider as follows.
We do this either by the data attributes data-orientation and data-cursor:

Or we can do it using the settings object and the properties orientation and cursor:

To make our dragger element visible outside of our slider we have to add a small CSS.
We can either apply our style globally to all sliders on the page, or, as in this case, apply the style only to the corresponding slider:

And here is the complete code for this example:

In this example we have our standard slider with a slightly different dividing line and a custom cursor for the mouse.

We change the orientation and the mouse cursor of the slider as follows.
We do this either by the data attributes data-cursor and data-dividing-line:

Or we can do it using the settings object and the properties cursor and dividingLine:

Please note that only files of type CUR may be used. For converting your graphic from e.g. PNG to CUR there are many small tools available on the web for free.

And here is the complete code for this example:

In this example we see a slider that only reacts when the mouse button is held down. In addition, we have a differently styled dividing line and a mouse cursor suitable for this purpose.

Let's have a look at how we make the slider only react to the mouse movement if the mouse button is pressed down.
And of course we look at the dividing line and the mouse cursor again.
We do this either by the data attributes data-on-pointer-down, data-cursor and data-dividing-line:

Or we can do it using the settings object and the properties onPointerDown, cursor and dividingLine:

The onPointerDown property is set to false by default. If we set it to true we make sure that the slider can only react to the mouse movement when the mouse button is pressed.

And here is the complete code for this example:

In this example we see a slider without automatic animation of the dividing line. The slider only reacts when the user interacts with it. In addition, we have again a differently styled dividing line and a suitable mouse cursor.

Let's look at how to disable the automatic animation of the dividing line.
And of course, let's have a look at the divider and the mouse cursor again.
We do this either by the data attributes data-cursor, data-dividing-line and data-auto-animation:

Or we can do it using the settings object and the properties cursor, dividingLine and autoAnimation:

The autoAnimation property is activated by default. If we deactivate the property with false, as in this example, we forbid the slider to animate the dividing line automatically by itself.

And here is the complete code for this example:

In this example we see a slider that the user cannot interact with. It only runs automatically and cannot be operated. In addition to this change, this slider has a different speed than the standard slider, does not pause between direction changes and applies a different easing to the animation.

Let's look at how we can deactivate the interaction with the slider and change speed, deactivate pause between direction changes and apply a different easing to the animation.
We do this either by the data attributes data-interactive, data-auto-animation-speed, data-auto-animation-pause and data-auto-animation-easing:

Or we can do it using the settings object and the properties interactive, autoAnimationSpeed, autoAnimationPause and autoAnimationEasing:

And here is the complete code for this example:

In this example we take a closer look at the two buttons in the slider with which the user can easily download the images used in the slider. With a few lines of CSS code we can reposition the buttons and style them differently.

As already known from one of the previous examples we set the two buttons within the ui element:

To reposition and style the buttons we just added we need a few extra lines of CSS. To get the button elements we need the id of the slider element, the class name of the ui element and the two class names of the buttons. With this data we can then style the elements as usual. Please note that as in this example it might be necessary to apply the important rule to the styles:

There is nothing more to consider in this example.

And here the complete code:

In this example we have a slider that can only be operated with an external input slider element.

First you should try to remote control the slider using the input slider above.
The slider shown here is a standard slider with the small exception that we set its start position to the middle, i.e. 50%, and allow the slider to be remotely controlled by other elements. And of course we forbid our slider to interact directly with the user and prevent automatic animation.
We do this either by the data attributes data-initial-position, data-interactive, data-auto-animation and data-controlled-by-others:

Or we can do it using the settings object and the properties initialPosition, interactive, autoAnimation and controlledByOthers:

That's it with the configurations for our slider.

Now let's have a look at the input slider element with which we want to remote control our slider.:

With the input slider element you should make sure that you always set 0 as min. At least if you want the control to start at 0%.
For max you can set a value. Either 1, 100 or 1000, it depends on how smooth and precise the control should be. The higher the value, the more precise the control.
And if you want your input slider element to be initialized in the middle, i.e. at 50%, then enter the value 50, if you have previously entered 100 as max. If you have set max to 1000 before you have to set value to 500 to stay in the middle. You know what I mean.

Now we have to script a little bit so that the input slider element can control our slider.
First, let's have a look at the whole thing in pure JavaScript:

First we initialize the slider and store the instance in a variable. Then we get the input slider element with which we want to control the slider and save this instance in a variable.
To control the slider during interaction with the input slider element we add an EventListener for the input event.
The first parameter must be true at this point to ensure that an interaction is taking place. The second parameter (e.target.value) passes the current value of the input slider element to the method controlByExternalSource. And the last parameter (e.target.max) passes the maximum value assigned in the HTML code (max="100") for the input slider element.
To tell the slider that the interaction is finished we add another EventListener for the change event and pass false as the only parameter.

And here the whole thing implemented with jQuery:

In principle it works the same way as in the example with pure JavaScript. Only the syntax is of course typical for jQuery a bit different.

Done. Now let's look at the complete code again:

Here we see a standard slider where we use JavaScript/jQuery to display the current position of the dividing line in percent.

How do we achieve this?
In both following code examples we initialize the slider first. After that we set an interval that accesses the method getPos from the slider every 100ms. We modify the position value we received a bit for a nicer presentation and then output it in a text field.
First, let's have a look at the whole thing in pure JavaScript:

Same same in jQuery:

Because this is a standard slider already known to us and we have processed the JavaScript/jQuery part completely, we are done and do not need any further code summary for this example.

In this example let's add a preloader animation to the slider.

Let's start with the HTML part. We take our default slider and insert the already known div with the class ui. In this ui div you can insert any animation. As you like. In this example I decided to use the roller animation of Loading.io. There you get the necessary code for the animation which you can insert directly into the ui div and into your CSS with a few small adjustments:

Please note: Microsoft Internet Explorer version earlier than 10 don't support CSS Animation. Therefore this example does not work on all browsers.
But in case you need to support older browsers, you can simply use an animated gif instead of a CSS loading animation. This way backwards compatibility is not a thing.

This is the part you copy and paste from Loading.io. To make sure the animation is centered in the slider, we put its markup in a small wrapper div with the id lds-wrapper:

This is how the CSS for the lds-wrapper div looks like:

And here the complete CSS including our wrapper to center the animation and the copied code from Loading.io:

Now that we have implemented the preloader animation we want to know how to remove this element when the slider is fully loaded and initialized.

Let's start with the JavaScript solution as usual:

Same same in jQuery:

First we write a small callback function that the slider can call when it is loaded. Within this callback function we set a timeout that removes the animation after 3000ms, i.e. 3 seconds.
The timeout is of course only an example and is used to show you the animation at all. Normally I would omit the timeout so that you can remove the loading animation immediately after successful loading.

After that you initialize the slider as usual and give it the settings object with the callback function.

Because this is a standard slider already known to us and we have processed the JavaScript/jQuery part completely, we are done and do not need any further code summary for this example.