-
+
@@ -29,7 +29,7 @@
Accessible
A11y Carousel is fully accessible with the keyboard and has the right aria attributes. The carousel is based on the example provided by the W3C.
Accessible
-
+
@@ -38,14 +38,14 @@
-
-
-
+
IE 10 Compatible
A11y Carousel support all browsers even that ugly duck. Because you and me know your clients are still on IE.
IE 10 Compatible
-
+
Vanilla JavaScript
No jQuery here, no dependecie either, just the JS you love <3. Also only 14.5 KB!
How to use it?
+How to use it?
HTML
<div id="my-slider">
<div> <!-- ⚠ Don't apply css to the div -->
@@ -71,247 +71,357 @@ JS
className: 'my-super-slider'
});Settings
+Settings
+ +
+
+
+
+
+
+ | + Name + | ++ Default + | ++ Infos + | +
|---|---|---|
| + autoplay + | ++ true (bool) + | ++ Enables autoplay + | +
| + autoplaySpeed + | ++ 7000 (int) + | ++ Autoplay Speed in milliseconds + | +
| + transitionSpeed + | ++ 300 (int) + | ++ Transition speed in milliseconds (the fade effect) + | +
| + arrows + | ++ true (bool) + | ++ Enables previous and next buttons + | +
| + dots + | ++ false (bool) + | ++ Enables slide pagination + | +
| + sliderIndex + | ++ 0 (int) + | ++ From where the slider start + | +
| + width + | ++ auto (string) + | ++ If you want to fix the width + | +
| + height + | ++ auto (string) + | ++ If you want to fix the height + | +
| + gesture + | ++ true (bool) + | ++ Enables swipe left and right on mobile + | +
| + pauseOnHover + | ++ true (bool) + | ++ Pause the slider on hover or focus + | +
| + className + | ++ a11y-carousel + | ++ Class name for the wrapper of your slider and controls + | +
| + ariaRoledescription + | ++ carousel (string) + | ++ Attribute aria-roledescription + | +
| + ariaLabel + | ++ Slideshow description (string) + | ++ What's in your carousel? Example : News Highlights + | +
| + playText + | ++ Start slide show (string) + | ++ Text to start the slide show (screen reader) + | +
| + pauseText + | ++ Stop slide show (string) + | ++ Text to stop/pause the slide show (screen reader) + | +
| + previousText + | ++ Previous (string) + | ++ Text for the button preivous + | +
| + nextText + | ++ Next (string) + | ++ Text for the button preivous + | +
| + ofText + | ++ of (string) + | +
+ Text for the aria-label of the slide. + aria-label="1 of 5" + |
+
| + slideText + | ++ Slide (string) + | +
+ Text for the pagination (dots). + Slide X + |
+
| + tablistText + | ++ Choose slide to display (string) + | ++ Text for the aria-label of the pagination (dots) + | +
SASS Starter
+Here is a sass starter width Font Awesome 5 Free:
+
+
-
+ 
+
+
+ 
+
+
+ 
+
+ | - Name - | -- Default - | -- Infos - | -
|---|---|---|
| - autoplay - | -- true (bool) - | -- Enables autoplay - | -
| - autoplaySpeed - | -- 7000 (int) - | -- Autoplay Speed in milliseconds - | -
| - transitionSpeed - | -- 300 (int) - | -- Transition speed in milliseconds (the fade effect) - | -
| - arrows - | -- true (bool) - | -- Enables previous and next buttons - | -
| - dots - | -- false (bool) - | -- Enables slide pagination - | -
| - sliderIndex - | -- 0 (int) - | -- From where the slider start - | -
| - width - | -- auto (string) - | -- If you want to fix the width - | -
| - height - | -- auto (string) - | -- If you want to fix the height - | -
| - gesture - | -- true (bool) - | -- Enables swipe left and right on mobile - | -
| - pauseOnHover - | -- true (bool) - | -- Pause the slider on hover or focus - | -
| - className - | -- a11y-carousel - | -- Class name for the wrapper of your slider and controls - | -
| - ariaRoledescription - | -- carousel (string) - | -- Attribute aria-roledescription - | -
| - ariaLabel - | -- Slideshow description (string) - | -- What's in your carousel? Example : News Highlights - | -
| - playText - | -- Start slide show (string) - | -- Text to start the slide show (screen reader) - | -
| - pauseText - | -- Stop slide show (string) - | -- Text to stop/pause the slide show (screen reader) - | -
| - previousText - | -- Previous (string) - | -- Text for the button preivous - | -
| - nextText - | -- Next (string) - | -- Text for the button preivous - | -
| - ofText - | -- of (string) - | -
- Text for the aria-label of the slide. - aria-label="1 of 5" - |
-
| - slideText - | -- Slide (string) - | -
- Text for the pagination (dots). - Slide X - |
-
| - tablistText - | -- Choose slide to display (string) - | -- Text for the aria-label of the pagination (dots) - | -
.slideshow {
+ position: relative;
+
+ button {
+ cursor: pointer;
+ appearance: none;
+ border: 0;
+ box-shadow: 0;
+ background: white;
+ border-radius: 0;
+ font-size: 0;
+ line-height: 0;
+ color: transparent;
+
+ &:after {
+ display: inline-block;
+ font-size: 1.5rem;
+ color: black;
+ line-height: 1;
+ font-weight: 700;
+ font-family: "Font Awesome 5 Free";
+ }
+ }
+
+ [id*="play"] {
+ position: absolute;
+ z-index: 10;
+ top: 0;
+ left: 0;
+ width: 3rem;
+ height: 3rem;
+
+ &:after {
+ content: "\f04c";
+ }
+
+ &.paused {
+ &:after {
+ content: "\f04b";
+ }
+ }
+ }
+
+ [id*="prev"],
+ [id*="next"] {
+ position: absolute;
+ z-index: 10;
+ top: 50%;
+ left: 0;
+ width: 3rem;
+ height: 3rem;
+ transform: translateY(-50%);
+
+ &:after {
+ content: "\f060";
+ }
+ }
+
+ [id*="next"] {
+ left: auto;
+ right: 0;
+
+ &:after {
+ content: "\f061";
+ }
+ }
+
+ .dots {
+ position: absolute;
+ z-index: 10;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ text-align: center;
+
+ button {
+ background: transparent;
+
+ &:after {
+ color: white;
+ content: "\f111";
+ }
+
+ &.active {
+ &:after {
+ font-weight: normal;
+ content: "\f111";
+ }
+ }
+ }
+ }
+ }
+