From 94cac4d9bb187a4ee311dd2f75f4e9e3ad538fd6 Mon Sep 17 00:00:00 2001 From: thomasmester Date: Thu, 12 Mar 2020 16:39:29 +0100 Subject: [PATCH] update doc --- index.html | 606 ++++++++++++++++++++++++++++++--------------------- src/doc.css | 2 +- src/doc.scss | 255 +++++++++++++++++----- 3 files changed, 559 insertions(+), 304 deletions(-) diff --git a/index.html b/index.html index 361be87..d0fef46 100644 --- a/index.html +++ b/index.html @@ -15,12 +15,12 @@

A11y Carousel

The accessible slideshow / carousel you've always dreamed of (or may be it's just me)

- +
-
+

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.

@@ -29,7 +29,7 @@

Accessible

-
+

IE 10 Compatible

A11y Carousel support all browsers even that ugly duck. Because you and me know your clients are still on IE.

@@ -38,14 +38,14 @@

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:

+
+
+ illustration image 1 +
+
+ illustration image 2 +
+
+ illustration image 3 +
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- 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";
+          }
+        }
+      }
+    }
+  }
+