AEBN Pitch Slider

Load source files

Add the tags that load the required Javascript and CSS files. Typically, these tags are placed in the <head> of your HTML page, but they can be placed anywhere as long as they precede the call to the load method of the pitch slider.

<script src=""></script>
<link rel="stylesheet" href="">

NOTE: An alternative is to skip this and all the steps that follow by building your pitch slider on the test page. You can experiment with different options there, and then copy and paste the resulting code into your web page.

Create target element

Add an empty div element where you would like the pitch to appear on the page and give it a unique ID.

To change the default size of the carousel, add a style attribute (with width and height properties) to your div. It's important for the new size to have the same aspect ratio as the original slides, which measure 1280px x 500px. Some good values would be 640 x 250, 1920 x 750, 320 x 125, etc. To make the sales tool responsive, use viewport units. The default size is 40vw x 15vw.


<div id="straight-pitch"></div>
<div id="straight-pitch" style="width: 640px; height: 250px;"></div>
<div id="straight-pitch" style="width: 60vw; height: 22.5vw;"></div>

This is not supported in IE.

Load the pitch carousel

Add a script tag to your page and call the pitch function:

<script> aebnPitchSlider.load(divId, options); </script>


The ID of the target div element. This ID must be unique on the page.
An object listing the settings for the pitch carousel

Both parameters are required.

To ensure your target element is loaded before the pitch function is called, you should wrap it in a window.onload handler (or $(document).ready in jQuery). This is highly recommended, especially for pages with a large amount of content.

Pitch options

Option Required? Value Default Value
orientation Yes "straight" or "gay" None
refid Yes Your Ref ID (i.e., 'AEBN-000001') None
theaterId Yes Your Theater ID None
theaterCname No Your Theater Cname None
intervalSeconds No Number of seconds between slides 3
randomOrder No Are the slides in random order? (true or false) true
openNewWindow No When clicked, does the slide open a new window? (true or false) false



aebnPitchSlider.load('pitch-slider', {orientation: 'straight', refid: 'AEBN-000001', theaterId: 13992});

Open links in new window:

aebnPitchSlider.load('pitch-slider', {orientation: 'straight', refid: 'AEBN-000001', theaterId: 13992, openNewWindow: true});

No randomization, 5 seconds between slides

aebnPitchSlider.load('pitch-slider', {orientation: 'straight', refid: 'AEBN-000001', theaterId: 13992, randomOrder: false, intervalSeconds: 5});


Errors will appear in your browser's console.

No valid div element found with ID of <your div ID>
The ID passed into the aebnPitch function was not found. Check for typos or wrap the function call in an onload event handler.
Required parameter options is missing
Please supply a valid options object.
Required parameter options is not an object
Please supply a valid options object.
Required option orientation is missing
Please supply a vaild value for orientation.
Valid values for option orientation are "straight" and "gay"
Please supply a vaild value for orientation.
Required option refid is missing
Please supply a vaild value for refid.
Required option theaterId is missing
Please supply a vaild value for theaterId.
Invalid value for option theaterId
theaterId must be a integer value.
Invalid value for option refid
Please supply a vaild value for refid.
Invalid value for option intervalSeconds
intervalSeconds must be a positive number.
Option randomOrder must be true or false
An invalid value was supplied.
Option openNewWindow must be true or false
An invalid value was supplied.
Could not retrieve pitch data
An error occurred while trying to get the pitch data. The server might be down or too busy, or there may be a connection problem. These issues should be temporary.