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”.

ad slider group setting

The slider ad group mode works similar to the ordered ad group. Use the ad weights to determine the order in which the ads appear. However, there is a significant difference between the ordered ad group. In the slider, the ads with the lowest ad weight appear first. The lower the ad weight, the further up the chain the ad is placed.

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

ad slider delay setting

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

Ad Slider example

  • This is the first of three ads …
  • this is number two …
  • ... and after the third ad the slider continues with the first one.

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 function.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' );

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' );

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 );

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.


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; }

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; }

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

Tagged: