Demos
Quick links to examples:
- Standard
- Dots
- Varying width breakpoints
- Partial Reveals
- Fixed width slides
- Paginated navigation
- Autoplay
- Looping
Standard 1up Carousel with thumbnail and next/previous links.
This carousel starts with HTML containing slides with focusable (linked) content inside them and linked thumbnail navigation, which are regular anchor links to each slide's corresponding ID attribute. (We suggest putting those first in the source order, if you include them.) It also has next/prev links that are automatically added through the addition of a data-carousel-nextprev attribute.
city scene by Andrea Cau
city scene by Henning Witzel
city scene by Jonathan Riley
city scene by Jonathan Roger
city scene by Chuttersnap
city scene by @djluvrocks
city scene by Lance Anderson
city scene by Anthony Intraversato
Same Example with Dot Navigation
You can have dots instead of thumbnails by adding the carousel_nav-dots class
You can also set the attribute on carousel_item elements to get individual timing.
Example w/ varying number of slides showing depending on viewport size
This example plays nicely with CSS breakpoints to show a different number of slides depending on the viewport size. To use breakpoints in this way, for back compat, be sure to include Snap Points that correspond to the item widths. See CSS for this example.
CSS for this example
/* breakpoints example */
@media (min-width: 40em){
.breakpointsexample .carousel_item {
width: 50%;
}
.breakpointsexample .carousel_pane {
scroll-snap-points-x: repeat(50%);
}
}
@media (min-width: 50em){
.breakpointsexample .carousel_item {
width: 33.333%;
}
.breakpointsexample .carousel_pane {
scroll-snap-points-x: repeat(33.33333%);
}
}
@media (min-width: 60em){
.breakpointsexample .carousel_item {
width: 25%;
}
.breakpointsexample .carousel_pane {
scroll-snap-points-x: repeat(25%);
}
}
Example with partial slide reveals.
If you set slides to a width that doesn't divide evenly in the visible viewport, you'll have slides that partially reveal, which can be a nice affordance to suggest to the user that there's more content to see.
CSS for this example
.revealexample .carousel_item {
width: 85%;
scroll-snap-align: center;
}
.revealexample .carousel_pane {
scroll-snap-points-x: repeat(85%);
}
Fixed width slides
This example is similar to prior examples that show multiple slides, but it has fixed-width slides, rather than slides that fill a percent of the viewport. It also uses dynamic pagination for thumbnails and arrows through the "data-carousel-paginated" attribute. Pagination will cause the thumbnails and arrows to treat the visible slides as one unit, advancing as a whole, which tends to work better for multiple slides. Regardless of whether widths are fixed or fluid, if the number of slides showing at any time varies such as in this example, the number of dots may change across breakpoints. Dynamic thumbnails highlight one "viewport" at a time.
CSS for this example
/* cars example */
.cars-example .carousel_item {
width: 500px;
max-width: 100%;
scroll-snap-align: center;
}
Responsive slide widths with paginated navigation
This example is similar to prior examples that show multiple slides, but it uses dynamic pagination for thumbnails and arrows through the "data-carousel-paginated" attribute. Pagination will cause the thumbnails and arrows to treat the visible slides as one unit, advancing as a whole, which tends to work better for multiple slides. The number of dots in the nav may change across breakpoints to match the number of "pages" that are visible.
Auto-play carousel example
By setting the data-carousel-autoplay attribute on the fg-carousel element to a natural number value carousel will automatically rotate through the images. The value represents a the millisecond delay between item transitions. In the example below we have data-carousel-autoplay="4000"
You can also set the attribute on carousel_item elements to get individual timing.
Example with endless looping
A carousel carousel with data-carousel-loop will append items to either end as needed so the scroll is infinite. This is recommended for 1-slide-at-a-time carousels.
About
This carousel component is built to be easy to use, dependency-free (aside from feature polyfills), and accessible.
Documentation
To make a carousel, create a fg-carousel element to contain your content. This element will be recognized by this component’s javascript, and allow it to be enhanced with necessary behaviors and accessibility information.
Inside the carousel element, place one or more items that will become carousel items that snap scroll and fill 100% of the width.
Including Scripts & Styles
The carousel has some dependencies, one for the Javascript and one for the CSS, which you can find in the src directory:
<script>this.customElements||document.write('<script src="./lib/document-register-element.js" defer><\x2fscript>');</script>
<script src="./lib/intersection-observer.js" defer></script>
<script src="../src/fg-carousel.js" type="module"></script>
<script src="./es5/fg-carousel.js" defer nomodule></script>
<script src="./lib/inert.js" defer></script>
<link rel="stylesheet" href="../src/fg-carousel.css">
Note: to support IE11, we have used Babel to create a module-free version of the carousel in the demo directory, which is listed above using the module/nomodule pattern to only delivery to non-module browsers.
Methods and Events
The carousel has several methods you can call on it, such as goto, next, prev. We’re still refining this API so they’ll be documented soon.
The carousel has several events.
- Also tbd documentation
Polyfills
To use the carousel in modern browsers, two polyfills are likely necessary (please check browser support to see how these align with your needs).
- Custom Elements: The
fg-carouselelement uses the standard HTML custom elements feature, which are well supported but need a polyfill in IE11 and older. This project references WebReflection’s Document Register Element polyfill which can be found at demo/lib/document-register-element.js. It should be loaded prior to the accessible carousel script. In our demo page we use the following pattern to load it, but you could package it with - Intersection Observer: The
fg-carouselelement uses the standard intersection observer API to detect visibility of elements in the scroll area. For support, this may need a polyfill. We’ve included one in the demos for convenience, via<script src="./demo/lib/intersection-observer.js" defer></script> - Inert: The standard
inertattribute (support currently includes Chrome and Edge) is used for disabling the rest of the slides that are not active, which helps ensure a clean “tabs” experience when the component is used with assistive tech. Browser support forinertis still improving so WICG’s Inert polyfill is listed as a dependency of this project and can be found in the demo/inert.js file. You can load it in a deferred or async manner as it is not used until the dialog is opened. Example:<script src="./lib/inert.js" defer></script>