New Carousel Widget Released
The Webtools Blog now offers a carousel widget for displaying a slideshow of images and content. Place a script tab in your webpage, add content/images to the Webtools Blog, and that’s it. The carousel will be inserted with the newest content as it is published. The widget is fully accessible, responsive, and customizable.
Example
https://illinois.edu/webservices/toolbox/blog/carousel.html
Responsive Design
The new widget is responsive and will size and scale properly on all device types.
Image Sizing
Images should be one consistent size and they should be sized to the width of the largest device type they will be displayed in. Different sizes will still work, however the user will notice the slideshow changing sizes for the differently sized images. Once the desired image width is determined that value should be entered on the Blog/Setup/Widgets/edit screen for the Carousel widget.
Customization
Set content elements such as title and summary to display or not. Set the number of images to rotate through as well as the number of seconds between rotation. The widget can also be set to display specific blog categories.
Accessible Design
* Fully keyboard accessible
* Automatically stop image rotation on mouse hover or keyboard focus
* Improved color contrast of text content with background shading
* Labels on buttons and tab controls updated with slide information
Instructions for implementing into a website
https://youtu.be/oqMUzc-1-d0
Thank You to DRES
Web Services would like to thank the Division of Disability Resources & Educational Services for all of their great work on this widget. The widget was already 100% responsive and accessible when it was handed over to Web Services to implement. We appreciate it!
