Add Sliders

How to Add a Slider to Your Webpage

AMO allows you to create a series of animated, rotating images (also known as “sliders”) that can be used on different pages of your website. It’s very easy to add new slides and adjust the settings for size and type of slider.

Sliders are managed and created in the Website Management menu option in the left-side navigation menu in the AMO Admin area.

Creating Sliders is a two step process. You first create and configure the Slider itself, which you can think of as a folder where you’re going to place all of the images.

Once your Slider is created, you upload the various images into that Slider.

Finally, you head over to your webpage, and use an AMO tag to display a particular gallery.

First, Create the Slider

Create the Slider by clicking Website Management -> Sliders
Click the “Add Slider” button
In the “Select Slider Type” dropdown, select “Carousel Responsive” (this will automatically rescale your images to fit the users screen, depending on if it’s mobile, tablet or monitor).
Give the Slider a name – this label is for your reference only, it won’t be seen on the website.
If you’d like this particular slider to be featured at the top of your homepage under the navigation, go ahead and check the “Display Carousel as Top Banner of Website:” box. Only one slider can be used for this purpose at a time.
The slide interval controls how long you see a particular image, before it slides out of the way and the next image takes its place. This number is milliseconds – so if you’d like your images to sit for 5 seconds before moving to the next image, enter 4000.

Adding Images

To add an image click the “Add Slider Image” button. Upload your image using the “Browse” button and provide a display order in which this image will be shown on the slider. Add a label if you would like. Now we’re ready to add the slider to a webpage.

Adding a Slider to a Webpage

At the top of the slider settings page, you can see a number below “Slider ID” this is the slider’s number that we will use to add it to a webpage. Navigate to the page you would like to add this slider to. In the functional inserts library you will scroll down to “Insert Slider”. You will see the following text:

~[[display_slider_id]]~

Replace the letters “id” with the Slider ID number that was provided on the slider settings page. If our Slider ID was 54, then the text in the functional insert would read:

~[[display_slider_54]]~

Now that you have added the functional insert and the appropriate ID number, update your webpage and view it. You can made adjustments to the settings and now see how it will look by refreshing the webpage.