Tutorial

How to Add an Image Carousel to a Page

Here is an example of an image carousel. Follow the steps below the carousel to set one up on your pages as well. 

Beautiful Mountains to Watch and Decompress



*NOTE - The carousel is set to have a responsive design, and your images will automatically compress in size based on the size of the screen. Therefore, for best results all images in one carousel should be larger images with the same dimensions. The images in the above carousel were all 500x333 pixel images. The resizing of images to the same dimensions does have to be completed outside of MemberGate in an image editor before uploading the images.

 

Click on each section to expand for more information

1. Under 'Tools' choose 'Carousel Generator'

Under 'Tools' choose 'Carousel Generator'

 

Carousel Generator
2. Choose 'Create New Carousel'

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

 

How to Add an Image Carousel to a Page
3. Enter a name for the carousel in the 'Carousel Name'

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

 

How to Add an Image Carousel to a Page
4. Enter a title for the carousel in the 'Carousel Title' field if necessary

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

 

How to Add an Image Carousel to a Page

 

Example Carousel

 

5. In the 'Items on Display' fields, enter in a number of images to show

 In the 'Items on Display' fields, enter in a number of images to show on the screen at once depending on the size of the screen the user is viewing. The smaller screen sizes will be tablets or mobile devices.

 

How to Add an Image Carousel to a Page
6. Animation - Choose how the slides will advance

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.

*NOTE - If choosing the Fade option - only 1 image will show at a time in the carousel.

 

How to Add an Image Carousel to a Page
7. Autoplay & Speed - Select if the carousel should automatically advance

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

 

How to Add an Image Carousel to a Page
8. Paging Controls - Select an option to show how the carousel progresses

Paging Controls - Choose 'Dots' from the drop down menu to have ellipses under the carousel to show how the carousel 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.

 

How to Add an Image Carousel to a Page

 

Example Carousel

 

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.

 

How to Add an Image Carousel to a Page

 

Example Carousel

 

10. Upload the images in the Carousel field

Upload the images in the Carousel field:

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

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

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

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.

 

11. Set the Carousel Status to 'Active' to show the carousel on a page.

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

12. Click the 'Save Carousel' button

Click the 'Save Carousel' button

13. Copy the CF tag from the preview page to paste on a content or department page

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

 

How to Add an Image Carousel to a Page
14. For example, the carousel can be added to a content page

For example - to add the carousel 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.

 

15. Carousel Example

Example Carousel

 

 

To see more example of carousels and their attributes click here: Carousel Examples