{"id":39,"date":"2026-02-11T16:10:30","date_gmt":"2026-02-11T16:10:30","guid":{"rendered":"https:\/\/teton.wwwdev.uwosh.edu\/web\/?page_id=39"},"modified":"2026-02-13T16:52:34","modified_gmt":"2026-02-13T16:52:34","slug":"image-carousel-block","status":"publish","type":"page","link":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/image-carousel-block\/","title":{"rendered":"Image Carousel Block"},"content":{"rendered":"\n
\n \n\n
\n \n\n

Image Carousel Block<\/h1>\n\n\n\n
\n
Return to CMS Guide<\/a><\/div>\n<\/div>\n\n<\/div>\n\n\n\n
\"placeholder<\/figure>\n\n<\/section>\n\n\n\n
\n \n\n

The Image Carousel block provides a way to display multiple related images in a carousel format. The block contains a heading, intro text, a call to action button, and images. When the block is first placed on the page, only one Image Carousel Item is present. This can be duplicated as many times as needed for the desired number of images in the carousel.<\/p>\n\n\n\n

Caption text is optional for each image. An optional modal video can be added to the images. To add a video, add a link to the video URL to the image and then put the value of “modal” in the link relation field. Explore the functional example below for more details.<\/p>\n\n<\/div>\n\n\n\n

\n \n\n
\n \n\n

Image Carousel Example<\/h2>\n\n\n\n

This intro text is used to provide context and additional details about the images in the carousel. Best practice is to limit this text to 1-3 sentences.<\/p>\n\n<\/div>\n\n\n\n

\n
\n
\n
\n \n\n
\n \n\n
\"placeholder
This is optional caption text. Praesent suscipit nunc vitae massa cursus sodales. Aliquam sed scelerisque augue.<\/figcaption><\/figure>\n\n<\/div>\n\n\n\n
\n \n\n
\"placeholder<\/figure>\n\n<\/div>\n\n\n\n
\n \n\n
\"placeholder
Cras sagittis augue non arcu aliquam, vitae bibendum risus tristique. Vestibulum facilisis, tortor et sodales laoreet, libero tortor mattis enim, a finibus augue tortor ac augue. Fusce nec risus eget justo suscipit imperdiet.<\/figcaption><\/figure>\n\n<\/div>\n\n\n\n
\n \n\n
\"placeholder<\/a><\/figure>\n\n<\/div>\n\n <\/div>\n <\/div>\n
\n
<\/div>\n