Hi here some points that should be faced in order to improve the a11y and be wcag compliant:

- the controls buttons should have the `[disabled]` attribute if they are buttons and [`aria-disabled`](https://www.w3.org/TR/wai-aria-1.1/#aria-disabled). Also the disabled buttons should be styled accordingly.  

- The current active slide should have the [`aria-current`](https://www.w3.org/TR/wai-aria-1.1/#aria-current) attribute.

Improve a11y

it works as standalone but it begins to act when integrated with bootstrap 5 tabs!

Only the first tab loads properly. Any idea how to fix this bug?

PS: Even SplideJS has the exact same issue.

```
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
			  <li class="nav-item" role="presentation">
			    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
			  </li>
			  <li class="nav-item" role="presentation">
			    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
			  </li>
			  <li class="nav-item" role="presentation">
			    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
			  </li>
			</ul>
			<div class="tab-content" id="pills-tabContent">
			  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
			  	<div class="glide" id="glide1">
				    <div class="glide__track" data-glide-el="track">
				      <ul class="glide__slides">
				        <li class="glide__slide">1</li>
				        <li class="glide__slide">2</li>
				        <li class="glide__slide">3</li>
				        <li class="glide__slide">4</li>
				        <li class="glide__slide">5</li>
				      </ul>
				    </div>
				    <div class="glide__arrows" data-glide-el="controls">
				      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
				      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
				    </div>
			  	</div>
			  </div>
			  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
			  	<div class="glide" id="glide2">
				    <div class="glide__track" data-glide-el="track">
				      <ul class="glide__slides">
				        <li class="glide__slide">1a</li>
				        <li class="glide__slide">2b</li>
				        <li class="glide__slide">3c</li>
				        <li class="glide__slide">4d</li>
				        <li class="glide__slide">5e</li>
				      </ul>
				    </div>
				    <div class="glide__arrows" data-glide-el="controls">
				      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
				      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
				    </div>
			  	</div>
			  </div>
			  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
			  	<div class="glide" id="glide3">
				    <div class="glide__track" data-glide-el="track">
				      <ul class="glide__slides">
				        <li class="glide__slide">1a</li>
				        <li class="glide__slide">2b</li>
				        <li class="glide__slide">3c</li>
				        <li class="glide__slide">4d</li>
				        <li class="glide__slide">5e</li>
				      </ul>
				    </div>
				    <div class="glide__arrows" data-glide-el="controls">
				      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
				      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
				    </div>
			  	</div>
			  </div>
			</div>
```

[BUG] Does not work with Bootstrap 5 Tabs

I'm trying to add glidejs to a wordpress site, it's working perfectly on desktop, but on mobile, it's not loading, seems that the JS files aren't being executed. I don't see a single error in the console. [This the codepen][1]. On mobile I see 3 pictures on top of each other.

the template

    <section id="Glide" class="glide banner_desktop">
    
        
          <div class="glide__arrows">
            <button class="glide__arrow prev" data-glide-dir="<"><i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i>
    </button>
            <button class="glide__arrow next" data-glide-dir=">"><i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
    </button>
          </div>
    
    	 <div class="glide__wrapper">
            <ul class="glide__track">
    
    <?php if ( have_rows( 'banner_desktop', 'option' ) ) : ?>
    	<?php while ( have_rows( 'banner_desktop', 'option' ) ) : the_row(); ?>
    	<?php if ( get_sub_field( 'image' ) ) { ?>
    
    		  <li class="glide__slide">
    
    	<a href="<?php the_sub_field( 'link' ); ?>">
    					<img src="<?php the_sub_field( 'image' );?>" />
    				</a>				
    				</li>
    
    		<?php
    	}
    		 endwhile; endif;
    		 ?>
    
            </ul>
          </div>
          
          <div class="glide__bullets"></div>
    
    </section>


functions.php

    wp_enqueue_script( 'glide', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide.js', array('jQuery') );
    wp_enqueue_script( 'glide_Js', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide_JS.js', array('jQuery') );
    
    wp_enqueue_style( 'glide_css', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide.css');
    wp_enqueue_style( 'glide_theme', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide_theme.css');

glide.js is

    var glide = function () {
    // glide.min.js code which is on codepen 
    //   https://cdn.jsdelivr.net/npm/glidejs@2/dist/glide.min.js 
    }();

  [1]: https://codepen.io/usmonovsardor7770/pen/WEqjMa

GlideJS not working on mobile

Hi, my marketer liked your slider, and asked me to implement it (in a pretty basic way, nothing fancy).

The issue is that this isn't keyboard-accessible, which at the very least would prevent some companies and agencies from being able to use your slider. As a developer I like to ensure some basic accessibility too anyways...

So I've modified our copy of the slider to turn all the clickables into button elements (for the bullets, these are still inside LI elements). These automatically accept keyboard focus, and trigger click events with both enter and spacebar keys.
In addition, I've added :focus styles to the :hover styles.

Some browsers put focus on elements clicked with the mouse, and usually the designers don't want those :focus styles to appear then, so we also happen to use a 2-line mouse-detection script so we can say "only show focus styles when no mouse detected" (could also add touch(start/end) to this as well).

Would you like a pull request?


feature request

2.0.4 Make slider keyboard accessible

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

@glidejs/glide

Hey,

thanks for this great slider, really modern coding and good execution!

I am lacking a feature i was used from `slick.js`.

I want to be able to disable/enable the slider/carousel based on breakpoints, as you already have the `breakpoint` setting and the matchMedia implemented it would make sense to add this.

See the slick docs for an example: https://github.com/kenwheeler/slick#responsive-option-example

May add the option to set a breakpoint to false and check for the boolean?

PS: I know how to do it outside of glide, but it would be nice to do it all at once ;)

Greets
Marcus

Disable/Enable glide based on breakpoint

Fairly new to this rotator but was wondering if there was a solution that I could use to add a common class to all the active perView slides in the rotator? As of right now I believe one class (glide__slide--active) gets added to the "first" active slide but was wondering if anyone had a solution to apply this too all visible perView slides at a time?

extension candidate

Add class to all perView active slides

I have seen enough documentation, but without finding how to correctly show the sliders in modals or lightboxes
Here is a code that can help, because I have managed to perfectly accommodate the sliders.
We will use Bootstrap modals for the example
Assuming we call the modals by some foreach in PHP ...

See i add a tag **data-slider**
```
<button type="button" class="btn btn-primary call-modal" data-toggle="modal" data-target="#modal-<?= $modal_id ?>" data-slider="#modal-slider-<?= $modal_id ?>">
	Launch Modal
</button>
```

The modal, which contains the id set above **id="modal-slider-X"** (where X is a var)
```
<div class="modal fade" id="modal-<?= $modal_id ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body">
				<ul id="modal-slider-<?= $modal_id ?>" class="slider" data-trigger="manual">
					
				</ul>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
```

And finally, the javascript code where I work in the event on Click of any element that is under the class .call-modal
```
<script>
	$(document).ready(function() {
		$(".call-modal").on('click', function() {
			var slider_id = $(this).attr('data-slider');

			slider = new Glide(slider_id, {
				type: "carousel",
				startAt: 0,
				perView: 2,
				perViewSm: 1,
				autoplay: 3000
			});

			slider.mount();
		});
	});
</script>
```

multiple sliders on modals or lightboxes

I'm trying to use foundation tabs inside a carousel, but its not working because the cloned items have the same ID as the main items, I've tried adding a counter but obviously that is cloned too, is there any way I can give the cloned items a unique ID?

Issue with cloned items in carousel

As "glide__slide--clone" is never visible, the child elements taking the focus (link, button, etc...) must be excluded from the sequential route.
By adding the `tab-index="-1"` property for example

@glidejs/glide

9 GitHub issues

Open issues

Links