Adding a Carousel in Mosaic

Modified on Tue, 10 Sep at 4:55 PM

A Carousel can be added to the Mosaic page. 


In order for the carousel to display properly images used in the carousel need to follow the following guidelines.


You can create more than one carousel on a Mosaic page


Note: Make sure all your images are of the same dimentions



Creating your images to use in the carousel

Carousel images should be generic background images WITH LITTLE OR NO TEXT on them. The title and description of the carousel slide should be used for brief information about the slide. Screen readers WILL be able to read the text that gets overlayed on top of the slide. Below is an example of a well-constructed slide.
a) For carousel images, make sure all of them are the same height and width for the best results. Otherwise the carousel will dynamically resize based on the image it is displaying causing your content below the carousel to jump around a bit. If you want your carousel images to have a height and width ratio of your standard flat screen TV (called a 16 by 9 ratio) which is pretty standard for carousels, you would want all of your images to be cropped in the same way. The resulting size for that ratio would be 768 pixels wide by 432 pixels high. here is a link to a calculator that will help with your sizing: http://size43.com/jqueryVideoTool.html. Just plug in the desired width and it will calculate what height you should crop your image to. There is also an online image cropping tool that can help you crop your images:https://croppola.com/.

b) Your images should be one of the following widths based on your page layout:
768 pixels wide if your page has portlets on the left and right side of your main content area. (most common scenario)
980 pixels wide if your page has only portlets on the left or only portlets on the right.
1140 pixels wide if you have no portlets on the left or right and your content spans the full width of the page.


Adding the carousel tile to the Mosaic page


1.) First Open the Mosaic editor as described here under How to pen the Mosaic Editor 


2.) From the Mosaic Menu select Insert then Carousel.


3.) From the menu dropdown select Carousel
4.) Place the tile on the page


5.) Click within the tile to have the option choice appear and select Edit
6.) This will display the edit options for the carousel.


Adding images to your carousel



1.) To start adding images select Add New

2.) Once you have selected to add a new image you will be presented with a popup that allows for searching and selecting the image you want to add to the carousel.
(You must have uploaded your images before you can add them to the carousel.) 

a.) Use Search to search for the image file by name.
b.) With Browse you can move about the website directory selecting folders to view the contents and locate the image you wish to use. 


3.) A thumbnail of the image will display to aid in your selection. To select the image click on it. To select the image click on it.

4.) Once you have selected the image fill out the image information and enter a URL if you want to direct the user to a different page or website.









Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article