This repository has been archived by the owner on Feb 8, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
thomasmester
committed
Mar 12, 2020
1 parent
cc7106c
commit 02ba5c4
Showing
9 changed files
with
810 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,334 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>A11y Carousel</title> | ||
| <link rel="stylesheet" href="src/doc.css"> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <header> | ||
| <h1>A11y Carousel</h1> | ||
| </header> | ||
| <main> | ||
| <p class="lead"> | ||
| The accessible slideshow / carousel you've always dreamed of <small>(or may be it's just me)</small> | ||
| </p> | ||
| <h2 class="visually-hidden">Demo :</h2> | ||
| <div id="demo"> | ||
| <div> | ||
| <div> | ||
| <div class="media" style="background-image: url('src/img/slide-0.jpg')"></div> | ||
| <div class="captation"> | ||
| <h3>Accessible</h3> | ||
| <p>A11y Carousel is fully accessible with the keyboard and has the right aria attributes. The carousel is based on <a href="https://www.w3.org/TR/wai-aria-practices/examples/carousel/carousel-1.html">the example provided by the W3C</a>.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <div> | ||
| <div class="media" style="background-image: url('src/img/slide-1.jpg')"></div> | ||
| <div class="captation"> | ||
| <h3>IE 10 Compatible</h3> | ||
| <p>A11y Carousel support all browsers even that ugly duck. Because you and me know your clients are still on IE.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <div> | ||
| <div class="media" style="background-image: url('src/img/slide-2.jpg')"></div> | ||
| <div class="captation"> | ||
| <h3>Vanilla JavaScript</h3> | ||
| <p>No jQuery here, no dependecie either, just the JS you love <3.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <h2>How to use it?</h2> | ||
| <h3>HTML</h3> | ||
| <pre><code class="html"><div id="my-slider"> | ||
| <div> <!-- ⚠ Don't apply css to the div --> | ||
| <!-- Slider 1 Content --> | ||
| </div> | ||
| <div> | ||
| <!-- Slider 2 Content --> | ||
| </div> | ||
| <div> | ||
| <!-- Slider 3 Content --> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <!-- At the end of the body tag --> | ||
| <script src="path/a11y-carousel.min.js"></script></code></pre> | ||
| <h3>JS</h3> | ||
|
|
||
| <pre><code class="javascript">var slider = new A11yCarousel("#my-slider", { | ||
| autoplay: true, | ||
| dots: true, | ||
| className: 'my-super-slider' | ||
| });</code></pre> | ||
|
|
||
| <h2>Settings</h2> | ||
|
|
||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th> | ||
| Name | ||
| </th> | ||
| <th> | ||
| Default | ||
| </th> | ||
| <th> | ||
| Infos | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| autoplay | ||
| </td> | ||
| <td> | ||
| true (bool) | ||
| </td> | ||
| <td> | ||
| Enables autoplay | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| autoplaySpeed | ||
| </td> | ||
| <td> | ||
| 7000 (int) | ||
| </td> | ||
| <td> | ||
| Autoplay Speed in milliseconds | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| transitionSpeed | ||
| </td> | ||
| <td> | ||
| 300 (int) | ||
| </td> | ||
| <td> | ||
| Transition speed in milliseconds (the fade effect) | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| arrows | ||
| </td> | ||
| <td> | ||
| true (bool) | ||
| </td> | ||
| <td> | ||
| Enables previous and next buttons | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| dots | ||
| </td> | ||
| <td> | ||
| false (bool) | ||
| </td> | ||
| <td> | ||
| Enables slide pagination | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| sliderIndex | ||
| </td> | ||
| <td> | ||
| 0 (int) | ||
| </td> | ||
| <td> | ||
| From where the slider start | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| width | ||
| </td> | ||
| <td> | ||
| auto (string) | ||
| </td> | ||
| <td> | ||
| If you want to fix the width | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| height | ||
| </td> | ||
| <td> | ||
| auto (string) | ||
| </td> | ||
| <td> | ||
| If you want to fix the height | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| gesture | ||
| </td> | ||
| <td> | ||
| true (bool) | ||
| </td> | ||
| <td> | ||
| Enables swipe left and right on mobile | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| pauseOnHover | ||
| </td> | ||
| <td> | ||
| true (bool) | ||
| </td> | ||
| <td> | ||
| Pause the slider on hover or focus | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| className | ||
| </td> | ||
| <td> | ||
| a11y-carousel | ||
| </td> | ||
| <td> | ||
| Class name for the wrapper of your slider and controls | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| ariaRoledescription | ||
| </td> | ||
| <td> | ||
| carousel (string) | ||
| </td> | ||
| <td> | ||
| Attribute aria-roledescription | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| ariaLabel | ||
| </td> | ||
| <td> | ||
| Slideshow description (string) | ||
| </td> | ||
| <td> | ||
| What's in your carousel? Example : News Highlights | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| playText | ||
| </td> | ||
| <td> | ||
| Start slide show (string) | ||
| </td> | ||
| <td> | ||
| Text to start the slide show (screen reader) | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| pauseText | ||
| </td> | ||
| <td> | ||
| Stop slide show (string) | ||
| </td> | ||
| <td> | ||
| Text to stop/pause the slide show (screen reader) | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| previousText | ||
| </td> | ||
| <td> | ||
| Previous (string) | ||
| </td> | ||
| <td> | ||
| Text for the button preivous | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| nextText | ||
| </td> | ||
| <td> | ||
| Next (string) | ||
| </td> | ||
| <td> | ||
| Text for the button preivous | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| ofText | ||
| </td> | ||
| <td> | ||
| of (string) | ||
| </td> | ||
| <td> | ||
| Text for the aria-label of the slide.<br> | ||
| aria-label="1 of 5" | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| slideText | ||
| </td> | ||
| <td> | ||
| Slide (string) | ||
| </td> | ||
| <td> | ||
| Text for the pagination (dots).<br> | ||
| Slide X | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| tablistText | ||
| </td> | ||
| <td> | ||
| Choose slide to display (string) | ||
| </td> | ||
| <td> | ||
| Text for the aria-label of the pagination (dots) | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| </main> | ||
| <footer> | ||
| Made with 🍟 by <a href="https://github.com/hotgeart">hotgeart</a> | ||
| </footer> | ||
| </div> | ||
|
|
||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script> | ||
| <script src="dist/a11y-carousel.min.js?2"></script> | ||
| <script> | ||
| document.addEventListener("DOMContentLoaded", function(event) { | ||
| var slider = new A11yCarousel("#demo", { | ||
| autoplay: true, | ||
| dots: true, | ||
| className: 'demo-slider' | ||
| }); | ||
| hljs.initHighlightingOnLoad(); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.