Some things may look a little different on your site
We are currently transitioning from an old set of blocks to these new ones. Please note that the following documentation is for the new blocks. While some things may look similar, there will be likely be some notable differences, so please use caution when referring to these documents and feel free to reach out if you have any questions.
Introduction
The Carousel Block provides an engaging way to showcase multiple pieces of content within a single, scrollable display. This block allows you to arrange a series of images, videos, or other content into a rotating slideshow, which users can navigate through manually or set to autoplay.
Use Carousels Wisely
It’s easy to get carried away with the visual appeal of carousels, and many users tend to overuse them or pack them with too many slides that visitors will never see. While a carousel might seem like a great idea for the header of your site, this is actually one of the worst places for it in terms of user experience. Data consistently shows that users typically only see the very first slide, and perhaps a second, before moving on. Any crucial content placed beyond the initial slide in a header carousel is highly likely to be missed entirely.
Before implementing a carousel, be very deliberate about whether it’s truly the most effective way to convey your message. Prioritize placing your most vital content and calls to action above the fold (visible without scrolling) and outside of a carousel. Use carousels sparingly and strategically to engage users who are already interested in exploring further, rather than as a primary way to display critical information. Always consider if a static display, grid, or list would serve your content and your users better.
Style
Controls Color
Set the color of the navigation controls for your carousel (arrows, pagination dots, etc.)
Slides Per Page
The number of slides that will appear side by side on a desktop-sized display.
Space Between Slides
Choose whether you want to display a gap (number of pixels) between slides in the slideshow.
Vertical Alignment
Choose how the slides should be aligned vertically, if they are different heights (top, middle, or bottom).
Force Controls Outside
By default, the arrow controls and page dots will display over the top of your content. In most cases, this is okay and choosing a color that contrasts with your content will provide a good experience. However, there may be cases where your content needs to be fully visible. Choosing the “force controls outside” option will add spacing so that the controls do not appear on top of your content.
Settings
Autoplay (on/off)
Enable to automatically flip through slides in your carousel. If the user is hovering, autoplay will pause.
Autoplay Duration (seconds): Specify the number of seconds a slide will show before flipping to the next.
Show Pagination Dots (on/off)
Show or hide the pagination dots that appear on the bottom of your slideshow to indicate what slide you are on.
Show Arrows (on/off)
Show or hide the arrows that control what slide you are on. Users will still be able to control your slideshow by swiping on their device.
Note: Disabling these is not recommended for accessibility purposes. You should only disable if autoplay is enabled and user interaction is not intended.
Examples
You can create many different layouts using the carousel block.
Cards
Slides Per Page: 3
Space Between Slides: SM (16)
Force Controls Outside: Enabled
Entomology
The Department of Entomology is a world-class graduate training and research institution committed to advancing research in insect biology.
Animal and Dairy Sciences
The Department of Animal & Dairy Sciences focuses research on sustainability, food security, innovation, health, and ingenuity.
Forest and Wildlife Ecology
The Department of Forest and Wildlife Ecology is a national leader in forest science and wildlife ecology research, teaching, and training.
Soil and Env Sciences
The Department of Soil and Environmental Sciences’ mission is to provide instruction, research, and extension leadership in soil science.
Image Gallery
Autoplay: 5 seconds
Controls Color: White
