Carousel (Rotator)

Before Submitting Carousel Content :

Your request must meet certain technical requirements in terms of format and quality.

• Image must be 652 pixels wide by 310 pixels high;
• Meet colour principals and criteria. Refer to the colour contrast section in the Accessibility Guide;
• The less text on the image, the better.

Your Request Must Include :

• Final and approved Microsoft Word mockup (English and French);
• Images in a .jpg or .png format (English and French);
• Caption text (up to 80 characters) insert below the image (English and French);
• Alternative text (alt text) of the images for the visually impaired (English and French);
• Hyperlinks to desired iService Web page (English and French);
• Publication date.

Visit our Prepare Content page for instructions on how to create a mockup.

Note: The maximum period of publication is one week.

Only the iService home page and the College home page can contain a rotator.

Banners

• The banners on the home page are 652px wide by 310px high.
• There is a caption below each banner that should be kept to one line (80 characters).
• The banner and the caption are used as links to pages on the iService or ESDC.prv site and not to other applications such as Saba, PeopleSoft or SAP.
• The carousel code from the WET is the basis of the iService banner.
• Automatic rotation of the carousel makes it difficult to read the banners in the time provided, so the carousel is paused by default to make it more user friendly and accessible.

iService Promotions

• panel 1
• panel 2

 

How many banners can there be?

The maximum number of banners displayed will be kept to ten. This is not a hard rule and shall be subject to the discretion of the iService Operation Coordinator.

Banner Code Breakdown

The banner code is in a column (grid) that is 7 wide and there is an invisible heading that is available to screen readers.

<div class="row"><!-- Start Carousel Column -->
<div class="col-md-7"><!-- Start Carousel -->
<h2 class="wb-inv mrgn-tp-md">iService Promotions</h2>

A list of panels needs to match the number of banner items.

<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel1">panel 1</a></li>
<li><a href="#panel2">panel 2</a></li>
</ul>

An added comment indicates when a banner can be removed. The banner image has a link and alternative text. Below the image is a caption that also links to the same page as the image. If the alternative text for the image is too long (max 160 characters), it can be a part of the caption but invisible to the sighted user. In the alt="" must be a short description and the location of the long description. An example of alternative text that points to a long description is this: alt="Security Awareness Week. Long description below". The visible caption text should fit on one line, approximately 80 characters. The class "in" makes the banner visible (class="in fade").

<div class="tabpanels"><!-- Start Carousel Tabs -->
<div id="panel1" role="tabpanel" class="in fade"><!--Remove Nov 21-->
<figure><a href="https://esdc.sabacloud.com/Saba/Web_spf/CA1PRD0006/app/shared;spf-url=common%2Fleclassview%2Fvirtc-00097052">
<img src="/eng/rotator/ask_me_live_benoitlong.jpg" alt="Ask Me Live: Service Transformation with Benoît Long" /></a>
<figcaption><p><a href="https://esdc.sabacloud.com/Saba/Web_spf/CA1PRD0006/app/shared;spf-url=common%2Fleclassview%2Fvirtc-00097052">Ask Me Live: Service Transformation with Benoît Long</a></p></figcaption></figure>
</div>
<div id="panel2" role="tabpanel" class="out fade"><!--Remove Nov 30-->
<figure><a href="/eng/is/security/topics/unauthorized_access.shtml">
<img src="/eng/rotator/rotator-unauthorized-access.png" alt="Think before you click. There is a cost to curiosity! " /></a>
<figcaption><p><a href="/eng/is/security/topics/unauthorized_access.shtml">Think before you click. There is a cost to curiosity! </a></p> </figcaption></figure>
</div>