Accessible360 / accessible-slick

the last (accessible) carousel you'll ever need.

Home Page:https://accessible360.github.io/accessible-slick

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add option to allow control of where the prev/next arrows are placed

jasonwebb opened this issue · comments

Depending on the visual design and the number of slides shown for any given carousel, the logical tab sequence of all the controls and slide content can vary. Though we do always know how many slides are shown at any time, we can't really infer the visual design in order to programmatically move controls around in the DOM to be logical.

Let's create a new option that developers can use to make accessible-slick place the arrow icons at particular places in the DOM structure of the carousel. I'm thinking the following places are most useful:

  1. Place both arrow buttons before the slides.
  2. Place both arrow buttons after the slides.
  3. Place the previous button before the slides, and the next button after the slides.
  • Expose a new option (arrowPlacement?) that accepts a string that needs to match one of the following: "beforeSlides", "afterSlides", "split".
  • Document this new option and accepted values in the main README
  • Create a CodePen demo using this new setting.

The new arrowsPlacement setting is used in this hero banner sample on CodePen: https://codepen.io/A360/pen/zYqKvXN