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.
*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
Under 'Tools' choose 'Carousel Generator'
Choose 'Create New Carousel' from the drop down box and select the 'Add/Edit Carousel' button
Enter a name for the carousel in the 'Carousel Name' field. This is an internal name and is not displayed.
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.
Example Carousel
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.
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.
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.
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.
Example Carousel
Navigation - Choose to have prev/next arrows or no buttons from the drop down menu.
Example Carousel
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.
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.
Click the 'Save Carousel' button
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.
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.
Example Carousel
To see more example of carousels and their attributes click here: Carousel Examples