Accessible for screen readers

“After slide changes screen-reader tells inner content of new active slide”

demos

SPACE BETWEEN SLIDES

1

2

3

4

const sliderSpaceBetween = new Gallery( "#sliderSelector", {
spaceBetweenSlides: 20,
arrows: true,
timeBetweenSlides: 1000,
});

Try with screen reader

Big fox

Big fox eats huge rabbits. But no more than two a day

satellite flying over the earth
lots of golden flowers in the meadow
black wireless headphones

Birds house

A big bird has a house. Yea, I don't want to think what to type here.

const sliderSpaceBetween = new Gallery( "#sliderSelector", {
spaceBetweenSlides: 20,
arrows: true,
timeBetweenSlides: 1000,
initialSlide: 2,
});

vertical align

1

2

3

4

const sliderVerticalAlign = new Gallery( "#sliderSelector", {
vertical: true,
spaceBetweenSlides: 30,
arrows: true,
timeBetweenSlides: 1000,
});

dots

1

2

3

4

const sliderDots = new Gallery( "#sliderSelector", {
dots: true,
spaceBetweenSlides: 20,
});

options

  • name
    initialSlide
    type
    number
    default
    0
  • name
    spaceBetweenSlides
    type
    number
    default
    0
  • name
    vertical
    type
    boolean
    default
    false
  • name
    initialSlide
    type
    number
    default
    0
  • name
    timeBetweenSlides
    type
    number
    default
    500(0.5s)
  • name
    arrows
    type
    boolean
    default
    false
  • name
    dots
    type
    boolean
    default
    false
View on github
HIRE page's author!

get started

1

Prepare HTML markup

<div class = "slider-selector" >
<div> slide </div>
<div> slide </div>
<div> slide </div>
<div> slide </div>
</div>

2

Add slider in a "head" tag

<head>
<title> Webpage name </title>
<!-- at first add slider basic styles and js --!>
<link rel = "stylesheet" type = "text/css" href = "galleryLib.min.css" />
<link rel = "stylesheet" type = "text/css" href = "yourStyle.css" />
<script defer src = "galleryLib.js" </script>
<!-- initialize slider in your script --!>
<script defer src = "yourScript.js" </script>
</head>

3

Initialize slider in your script file

<!-- in your script file --!>
const slider = new Gallery( ".slider-selector", {
spaceBetweenSlides: 20,
arrows: true,
});

4

Arrows and dots styling

<!-- If you are about to use dots or arrows --!>
<!-- You should to style them since they almost don't have styles --!>

Arrows classes:
gallery-arrows
gallery-arrow
gallery-arrow-prev
gallery-arrow-next
gallery-arrow-clicked <!-- this class adds to arrow after
you click it, and removes after slide changed.
Use it to add animations to arrow --!>
gallery-arrow-disabled <!-- this class adds to arrow-next
if it's the last slide and to arrow-prev if it's the first one --!>

Dots classes:
gallery-dots
gallery-dot
gallery-dot-active