Carousel

The Carousel module is essentially a slideshow that can handle images and/or text along with other customizeable features. Please Note: The Carousel module is customized per site. Not every Carousel module has the same features nor is every carousel styled to display the same.

Step 1: Log into Javelin.

Step 2: Choose which web page and region you want to add the module to, then click the black "Add" button above this region.

Step 3: The Add Module popup will appear. Choose that you would like to insert a "Carousel" module.

Step 4: The module will appear on the page with a warning that no slides have been found. This warning is not visible to users or while in View mode.

Step 1: Click the arrow next to the "Manage Slides" button on the module's admin bar.

Step 2: Click "Delete."

Step 3: Click "OK" at the prompt to confirm deletion.

If no dropdown appears, please file a support ticket. Sometimes, the slides will cover the dropdown and that needs to be fixed on a site-by-site basis.

Click & drag the module from the four-pointed arrow on its admin bar to move the module between regions or other modules on the page.

Step 1: Click "Manage Slides" from the module admin bar.

Step 2: Click "Add Another Slide" to generate a new form. You may have to scroll to the bottom of the list of slides to see this button.

Step 3: Fill out the form as you wish, options include:

• Image Use the "Select Image" link or icon to open the Image Manager.
• Title A pre-styled method of displaying heading-like text.
• Text Position Which quadrant to display the text.
• Link A pre-styled method of displaying a link, generally a button or linking the entire slide.
• Button Text What to display on the button
• Button Link Where to link the button
• Open link in new tab? A yes/no option for the Link or Button.
• Text A simplified rich-text editor for displaying more complex text.

If you have the option at all, you will either have the option of Link or Button, but not both.
If you have neither link nor button option, but do have the simplified rich-text editor, you can add links through it, as well as choose how they open.

Step 1: Click the arrow next to "Manage Slides" and click "Settings".

Step 2: Click "Animation" from the left.

Step 3: Change the following options

• Duration The length of time a slide is visible between transitions
• Speed The length of time it takes to complete a transition.

You have the ability to change the Transition type and the Easing between transitions. You can alter these dropdowns as you like, but if you want to reset them to their original settings, it will usually be as follows:

• Transition: Fade
• Easing: None

We suggest you don't alter these options for your main slideshow as that has been specifically styled for that area.

If you add a carousel elsewhere, here is a brief explanation of each item. These explanations can also be found by clicking the (?) next to each option.

• Image Width The width of the image. This is also used as part of the aspect ratio to resize the image for the "Scale To Fit" or "Fit To Cover" sizing methods.
• Image Height The height of the image. This is also used as part of the aspect ratio to resize the image for the "Scale To Fit" or "Fit To Cover" sizing methods.
• Container Width The width of the carousel itself. This only applies when using the "Rotate" transition setting.
• Container Height The height of the carousel itself. This only applies when using the "Fit to Cover" sizing method.
• Sizing Method Size the carousel to match the image width and height; Size the carousel in proportion to the image width and height, but extend to fill its container, or; set a fixed height but the width will extend to fill its container.
• Viewable Items Per Slide The number of items to display per slide. This ONLY applies when using the "Rotate" transition setting.
• Pause On Hover Whether or not to pause the carousel when the user's mouse is hovered on top of it.

The Carousel module has been built in such a way as to handle multiple screen widths. It accomplishes this by scaling or stretching the images and available space as set through the module settings.

The method best for display text as well as images is the "Exact Fit" method, as the Carousel proportions will never change. Text position and area is always determined by percentages based off the space available to the Carousel, not the image dimensions.

If text must be displayed while using "Scale to Fit" or "Fit to Cover," it should be reviewed on multiple screen widths so the text can be modified to handle most use cases. There is no way to ensure that the text will always appear correctly using these methods, as they are at the mercy of the end user's screen.