How to display banner ads in an Ad Slider

Table of Contents

How to use the Ad Slider

To use the Ad Slider, go to Advanced Ads > Groups and either create a new ad group or change the type of an existing group to “Ad Slider”.

The slider ad group mode works similarly to the ordered ad group. Use the ad weights to determine the order in which the ads appear. In the slider, the ads with the highest ad weight appear first. The higher the ad weight, the further up the chain the ad is placed.

The first new setting is the delay with which each slide is shown.

The second slider-specific option is the “Random order”. Here you can set your slides to appear in a random order on each page load. Please note that ad weights will influence the random order and break the randomization.

To display the ad slider, just use any of the methods described in the ad groups manual.

Ad Slider example

Additional Options

The Slider add-on uses the unslider.js script. You can adjust settings like the speed, the animation type (horizontal, vertical), or disable options like autoplay using a WordPress filter.

The following is an example you can add to your theme’s functions.php to adjust speed and animation.

Note: The default animation type has changed to infinite with version 1.4.0 of the Slider Add-On.

Jump back to the first slide

Use the code below to let the slider jump back to the first slide before version 1.4.0.

function restore_slider_behavior( $settings ) {
    $settings['infinite'] = 'false'; 
    return $settings;
}
add_filter( 'advanced-ads-slider-settings', 'restore_slider_behavior' );Code language: PHP (php)

Change options

You can adjust the layout and behavior of the slider using a hook. Please find the sample code for various options below. You can remove those that are not relevant to your use case. Please note that you might need custom CSS to style navigation elements after you enabled them.

function my_slider_adjustments( $settings ) {
    $settings['speed'] = 100; // 100 milliseconds
    $settings['animation'] = "'fade'"; // change animation to fade, also available: 'vertical', 'horizontal' (default)
    $settings['infinite'] = 'false'; // required in combination with the "fade" animation
    $settings['nav'] = 'true'; // show navigation buttons below the slider
    $settings['arrows'] = 'true'; // show navigation links left and right of the slider
    return $settings;
}
add_filter( 'advanced-ads-slider-settings', 'my_slider_adjustments' );Code language: PHP (php)

Load the unslider scripts from a CDN

In case you want to load the unslider scripts from an external CDN, add the following line to your wp-config.php.

define( 'ADVANCED_ADS_SLIDER_USE_CDN', true );Code language: JavaScript (javascript)

Tracking

If you are using the Tracking add-on, the ad impressions will be counted for each ad in the ad slider once with the page load (Frontend, Google Analytics and Database).

When you choose the Frontend method in combination with AJAX Cache Busting, the add-on records an impression for the group’s first ad.

Troubleshooting

By default, the slider will use the full width and will display below other elements and not next to them. There are a few possible solutions to this.

use the Refresh group option instead of the slider
use custom CSS to limit the size of the placement and to float it, like in the example below

.mysite-slider-placement { float:left; width: 160px; }

The code above floats the slider to the left and reserves a width of 160 pixels for it. The style targets the placement called “Slider Placement” and uses the prefix set under Advanced Ads > Settings > Layout / Output > ID prefix, in this case mysite-.

You can find the placement class for your site in the generated source code.

You might see an issue like

$slider1234567890.unslider is not a function

if your site uses multiple instances of the jQuery library. This is often caused by the theme or another plugin adding it.

If your site code shows more than one reference to jquery.min.js then this is the problem and you need to remove that duplicate call.

Technically, the Ad Slider preloads all files, including the GIF files. Therefore, a GIF file in the rotation does not always start when it is showing up. Instead, it runs at the position where the loop is currently located.

One solution for including GIF files in rotations is to refresh them on the same spot. This mode allows you to define specific refreshing intervals for particular ads.

If you have problems with the swipe feature (aka mobile touch), you can disable it by including the following line into your wp-config.php.

define( 'ADVANCED_ADS_NO_SWIPE', true );

The Slider add-on might collide with some styles in your theme. On this page, I am gathering known fixes from users. If you have found your own, please share it.

Theme: Avada, version 3.8.8
Issue: all images showing in the footer
Solution: (CSS)

.fusion-footer-widget-area .advads-slider li a { padding: 0 !important; }Code language: CSS (css)

Theme: Astra, version 3.7.3.
Issue: Ad size shifting effect while page is loading
Solution: (CSS)

.custom-slider ul { margin: 0;}Code language: CSS (css)

Over the time, we added a couple of fixes to various themes. Among them are the ones below. Try to add them one by one or all together to your site to see if that fixes your issues.

.unslider li { margin: 0 !important; }
.unslider li { clear: none !important; }Code language: CSS (css)

Resources

Check out more option and search the web for “unslider script” to get more information about modifying the slider like this.
How to rotate ads