2.5 Carousel

The "Carousel" tile rotates the content of a Sharepoint Picture Library, Blog or Announcements list item as illustrated by the below examples.

Banner Rotator:

This example displays the images stored in the Sharepoint Picture Library pointed at via the "URL" setting. It automatically rotates every 9 seconds (default setting) and the images can optionally be linked when adding a column named "URL" to the picture library.
Also the carousel automatically displays the image "Title" and "Description" if present.

Carousel Tile displaying images from a Sharepoint picture library

News Carousel:

This example displays the news items stored in the Sharepoint Announcements List pointed at via the "URL" setting. It automatically rotates every 9 seconds (default setting) and the news items are linked to the List detail view page. The carousel automatically displays the annoucement "Title" and "Body"

The second example also displays the image attached to the list item by specifying an item template in the "Content" tile setting:

Carousel Tile displaying announcements from a Sharepoint Announcements list    Carousel Tile displaying announcements from a Sharepoint Announcements list

Blog Post:

This example displays the most recent blog post of the blog specified by the URL. ALso, the text displayed by the tile is truncated to a maximum of 40 words via the "/more=nn" parameter: 

Carousel Tile displaying blog posts from a Sharepoint Blog

Video Carousel:

This example displays the selected videos contained in the document library specified by the URL. 

Carousel Tile displaying videos from a Sharepoint Doucment Library


you can specify the below options via the web part's "Options" setting or via the Tile's "Content" setting

display navigation bullets:/sliderbullets=1slider speed in seconds (entering"0" disables autoplay):/sliderspeed=10display slider navigation arrows:/slidernavigation=1set the color of the transparent text box:/box=#096Example using multiple options:/sliderbullets=1/slidernavigation=1

Please enter a comment below if you want to give feedback or have suggestions for improvements:

User Comments Post a Comment 

1/21/2021 23:37 
When I add a carousel as a full width item, it goes across the entire screen (which is what I want), but only one tile high, and it scales down correctly on mobile.
When I use your example of specifying my own size of 9x2, the banner looks great on desktop, but is no longer responsive. Could you tell me how I can make it full width, but the equivalent of 3 tiles high, full width that will display / scale down correctly on mobile.
1/22/2021 11:12 
plase rather use the below "Size" setting:

1/25/2021 23:20 
When I do the 100% the webpart does become responsive and full width, however the image inside does not scale, It just cuts it off. So the image on mobile is not legible.
1/26/2021 12:30 
which mobile device are you using for testing ?
Also, which browser are you using on your mobile device ?