Carousel

A carousel can add emphasis to content you'd like to showcase, like News, Events, and Images. A carousel pulls the content from a collection and displays it. A unique quality of a carousel is that it can be placed in various locations on a page.

A carousel takes the content from a collection and displays it as a slideshow.  The content pulled into the collection could be almost anything (News, Events, Images, Pages, etc.) 

Placement

A carousel can be placed in any portlet location.  This gives you the flexibility to place it almost anywhere on a page.  

  • Carousels placed in a standard portlet area (in the first and third column) will not display a background color.  
  • Carousels placed in a content well area portlet will display a light blue background.  

Carousel Content That Can Be Displayed 

  • News Items are an ideal type of content to display in a carousel.  The carousel will display the Title, Summary, and Image of a News item.
  • Events are another type of content ideally suited for display in a Carousel slider.  The Carousel will display the event Title and Summary information.
  • Images.  Some of our sites have been using the Carousel to display images from their lab.  Note that the Carousel will only display the images themselves and not the Title or Summary of the image.  
  • Pages work well if you have a variety of information that you wish to highlight that is neither a news item or an event.  Maybe you want to highlight some changes in the department, welcome new faculty members, show off your faculty's recent achievements, etc.  The Carousel will display the page Title and Summary information.

  

Carousel Size

The width of the carousel is based on the portlet location in which you place it.  The height of the portlet is based on the slide with the most content.  For example, lets say I am displaying a collection of News items in my carousel.  The system will review the News items and generate a fixed height for the carousel based on the News item with the most content (to include both images and text).  The fixed height is important because without it, the height of the carousel box would change on a per-slide basis and all content below the carousel would adjust accordingly (shift up or down on the page making the content hard to read).  With the fixed height, all content stays in place.  As such, News items in the carousel with less content than the largest will display white space.  

 

Images

Images and news items are the only type of content that will display an image in a Carousel.  For a News item to display an image, the image must be uploaded to the News item itself.  See Adding News for more information.  While your news items don't need to contain images, images are recommended for maximum impact.

 

Create the Content

To feed a carousel, you'll first need to create the content (News items, Events, Pages, Images).  Once the content is created you will need to pull it together or, 'collect it' by creating a collection.

 

Create a Collection

There is no need to create a collection if you wish to display all of your sites News or Events in a Carousel.  All sites come with a default News and Events collection already created for you.  These collections can be found in their respective folder that is located at the root of your site.

Since there are many ways of creating a collection, please see our Collection documentation on how to create one.  If you have any questions about this process, or are having difficulty setting one up, contact the Office of Information Systems Web Team for assistance.

 

Adding a Carousel (Portlet)

The best way to add a Carousel to a page is via a Carousel Portlet.  

  1. Go to the page where you wish to display a carousel portlet and decide where (what portlet area) you wish to place the carousel.
  2. Click on the green button to either "Manage portlets" or "Add, edit, or remove a portlet."
    CarouselPortletLocations2.jpg 
  3. From the Add portlet... drop-down menu, select Carousel portlet.
    Add Portlet
  4. On the resulting Add Carousel Portlet page
    • In the Portlet header field, enter a title for your new portlet.
    • Don't show the header option allows you to hide the header.  It will be shown by default.
    • In the Target collection search box, type the name, or part of the name, of an existing collection.  Click search.  Collections that contain the search term will appear.  You may need to click the search button two or three times before the system shows you matching collections.  This is a bug that we are working on.
    • Select the radio button of the collection that you wish to use.
    • You can Limit how many items will display in the portlet.
    • Hide controls allows you to take away the navigation arrows and radio buttons.
    • Timer allows you to customize the speed at which the slides are cycled.
  5. Click the Save button
  6. Return to your page to view the carousel.  If you do not see the carousel, you may need to refresh the browser.

   

Examples

The Biochemistry and Biophysics site uses a carousel portlet to display some of their research pictures.  The text under the image is part of the image itself.

CarouselExample_01.jpg

 

Department of Ophthalmology

Carousel_02.png

 

UNC Health Care and UNC School of Medicine Newsroom

Carousel_06.png

 

Department of Family Medicine

Carousel_04.png

 

Department of Obstetrics and Gynecology

Carousel_03.png

 

Department of Neurology

Carousel_01.png

 

Related content
Adding News