Tutorial

How to Add a Slider



 

The slider feature allows you to add a slideshow to your pages. Only 1 feature image will be shown at a time.

Follow the steps below to set a slider on your pages as well. 

1. Under 'Tools' choose 'Slider Generator'

Under 'Tools' choose 'Slider Generator'

Slider Generator
2. Choose 'Create New Slider' from the drop down box and select the 'Add/Edit Slider' button

Choose 'Create New Slider' from the drop down box and select the 'Add/Edit Slider' button

3. Enter a name for the Slider in the 'Slider Name' field.

Enter a name for the Slider in the 'Slider Name' field. This is an internal name and is not displayed.

Slider Name
4. Enter a title for the slider in the 'Slider Title' field if necessary.

Enter a title for the slider in the 'Slider Title' field if necessary. This is an optional field and the title will show along on the page of the slider.

Slider Name
5. In the 'Display Position' field, choose which part of the page the slider will appear from the drop down menu.

5. In the 'Display Position' field, choose which part of the page the slider will appear from the drop down menu. It can be added to the left or right nav panels, the main part of the page or the footer.

Slider Name
6. Animation - Choose the option from the drop down menu.

Animation - Choose the option from the drop down menu. The animation can be completed as a sliding feature or as a fade. The Speed can be Normal, Fast or Slow. The speed is the amount of time for the images to animate and is not related to how long they will stay on the screen.

Animation Autoplay Paging Controls Navigation
7. Autoplay & Speed

Autoplay & Speed - Choose 'yes' from the drop down menu to automatically animate the slide and select a speed in seconds from the drop down box. Choose 'no' to allow the user to manually animate.

Animation Autoplay Paging Controls Navigation
8. Paging Controls

Paging Controls - Choose 'Dots' from the drop down menu to have ellipses under the slider to show how the slider has progressed. Choose 'thumbnails' to include mini images of your graphics. Select the width for those thumbnails. Or choose 'No Controls' to have no paging controls.

Animation Autoplay Paging Controls Navigation
9. Navigation - Choose to have prev/next arrows or no buttons from the drop down menu.

Navigation - Choose to have prev/next arrows or no buttons from the drop down menu.

Animation Autoplay Paging Controls Navigation
10. Upload the images in the slider field:

Upload the images in the slider field:

A. Click Choose 'File' to select an image. 

B. OPTIONAL - Enter a caption to display under the image in the slider

C. OPTIONAL - Enter a link if the user clicks the image to redirect them to another page. Check the box if you would like the redirect to open in a new window.

D. From the 'Order' drop down box, arrange where you would like this image to be shown in the slider. 

E. Click 'Add Image' to select a new image and begin the process again.

F. Images can be rearranged at anytime. Click on the 'order' box and select a new location for the image.

Slider Image
11. Set the slider Status to 'Active' to show the slider on a page.

11. Set the slider Status to 'Active' to show the slider on a page. Choose 'inactive' to remove the slider from showing on all of the pages it is showing.

12. Click the 'Save slider' button

Click the 'Save slider' button

13. Copy the CF tag from the following page.

Copy the CF tag from the following page. That can be pasted in the main text box where you would like the slider to show.

Copy CF Tag

14. For example - under 'content' choose 'add content' and paste the CF tag in the 'Text or HTML to appear on this page' box.

For example - to add the slider to a content page from the control panel under 'content' choose 'add content' and paste the CF tag in the 'Text or HTML to appear on this page' box.

Copy CF Tag


How to Add a Slider