Would be cool if Splide has typing support. I'm developing mostly in TypeScript and this would enable Intellisense and write more fail-safe code.

Have a look at dayjs: https://github.com/iamkun/dayjs/tree/dev/types

Add TypeScript typings

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.1.4

### Description

I implemented CDN as follows in Astro,
but I encountered an error stating "assert.ts:12 Uncaught Error: [splide] null is invalid." Could you please inform me of the cause? There are no errors related to Astro.


```
---

const resnublog = {
  contents: [
    {
      id: 'cvrq1nmpt',
      title: 'sample1',
      image: 'aaa.png',
      date: '2020-11-02T15:00:00.000Z'
    },
    {
      id: 'mgxyrakl7',
      title: 'sample2',
      image: 'bbb.png',
      date: '2020-09-13T08:00:00.000Z'
    },
    {
      id: 'zprsef8bd',
      title: 'sample3',
      image: 'ccc.png',
      date: '2020-09-11T08:00:00.000Z'
    }
  ],
  totalCount: 19,
  offset: 0,
  limit: 10
}

import moment from "moment";
let setdate = function (str:any) {
  return moment(str).utc().format('YYYY-MM-DD');
};

---

<script is:inline src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link is:inline href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

<script type="text/javascript">
  new Splide( '.splide' ).mount();
</script>

	<main id="l-main" class="tw-absolute tw-top-[0px] tw-left-[0px] tw-w-[100%] tw-h-[100vh]">
		<section aria-label="golf_slider">
			<ul class="card-wrap tw-flex tw-flex-wrap tw-gap-[10px] tw-mr-[-10px] tw-z-[10] sm:tw-gap-[20px] sm:tw-mr-[0px]">
				{
					resnublog.contents.map((content: any) => (
						<li class="cart-wrap-inner splide__slide">
							<a href={content.link}>
								<img
									src={content.image.url}
									alt={content.title}
									decoding="auto"
									class="tw-w-[100%]"
								>
								<p class="tw-top-[10px] tw-text-[14px] tw-text-shadow-white">{content.title}</p>
							</a>
						</li>
					))
				}
			</ul>
		</section>		
	</main>
```

### Reproduction Link

_No response_

### Steps to Reproduce

1.Install Astro.
2.Generate index.astro and insert the following code.

```
---

const resnublog = {
  contents: [
    {
      id: 'cvrq1nmpt',
      title: 'sample1',
      image: 'aaa.png',
      date: '2020-11-02T15:00:00.000Z'
    },
    {
      id: 'mgxyrakl7',
      title: 'sample2',
      image: 'bbb.png',
      date: '2020-09-13T08:00:00.000Z'
    },
    {
      id: 'zprsef8bd',
      title: 'sample3',
      image: 'ccc.png',
      date: '2020-09-11T08:00:00.000Z'
    }
  ],
  totalCount: 19,
  offset: 0,
  limit: 10
}

import moment from "moment";
let setdate = function (str:any) {
  return moment(str).utc().format('YYYY-MM-DD');
};

---

<script is:inline src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link is:inline href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

<script type="text/javascript">
  new Splide( '.splide' ).mount();
</script>

	<main id="l-main" class="tw-absolute tw-top-[0px] tw-left-[0px] tw-w-[100%] tw-h-[100vh]">
		<section aria-label="golf_slider">
			<ul class="card-wrap tw-flex tw-flex-wrap tw-gap-[10px] tw-mr-[-10px] tw-z-[10] sm:tw-gap-[20px] sm:tw-mr-[0px]">
				{
					resnublog.contents.map((content: any) => (
						<li class="cart-wrap-inner splide__slide">
							<a href={content.link}>
								<img
									src={content.image.url}
									alt={content.title}
									decoding="auto"
									class="tw-w-[100%]"
								>
								<p class="tw-top-[10px] tw-text-[14px] tw-text-shadow-white">{content.title}</p>
							</a>
						</li>
					))
				}
			</ul>
		</section>		
	</main>
```


### Expected Behaviour

I hope for the error to be resolved so that splide.js can function within the Astro framework.

help me because splide does not work with Astro framework.

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

4.0.6

### Description

Axe tests run in cypress-axe give this error:

> "id": "aria-allowed-role",
>     "impact": "minor",
>     "tags": [
>         "cat.aria",
>         "best-practice"
>     ],
>     "description": "Ensures role attribute has an appropriate value for the element",
>     "help": "ARIA role should be appropriate for the element",
>     "helpUrl": "https://dequeuniversity.com/rules/axe/4.2/aria-allowed-role?application=axeAPI",
>     "nodes": [
>         {
>             "any": [
>                 {
>                     "id": "aria-allowed-role",
>                     "data": [
>                         "group"
>                     ],
>                     "relatedNodes": [],
>                     "impact": "minor",
>                     "message": "ARIA role group is not allowed for given element"
>                 }
>             ],
>             "all": [],
>             "none": [],
>             "impact": "minor",
>             "html": "<li class=\"splide__slide gamut-9iq18i-SplideSlide efok5bj0 is-active is-visible\" id=\"splide01-slide01\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 1\" style=\"width: calc(100%);\">",
>             "target": [
>                 "#splide01-slide01"
>             ],
>             "failureSummary": "Fix any of the following:\n  ARIA role group is not allowed for given element"
>         }
>     ]
> }

I've tried changing the role to various options but can't find anything that will pass these tests.  I can skip this check if you think this is an issue on _[cypress-axe](https://www.npmjs.com/package/cypress-axe)_'s end!

### Reproduction Link

_No response_

### Steps to Reproduce

Test accessibility with axe-core in Cypress

### Expected Behaviour

No errors for a basic splide component.  

cypress-axe accessibility test fails: "ARIA role group is not allowed for given element"

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.0.7

### Description

Hello.
I updated an application using Splide to version 4.0.7 and I noticed a regression issue when setting the **autoplay=true** property that stopped working on Chrome, Firefox and Edge (it works in Safari) when working on virtual machines or on machines accessed via RDP. 
On local machines, the issue is not reproduced and, with version 3 this issue didn't happen
A similar issue with autoplay not working is on [Splide - The lightweight, flexible and accessible slider/carousel](https://splidejs.com/)  page.

- Here same page on RDP connected machine (10 seconds nothing happens):
https://user-images.githubusercontent.com/29493222/185506225-b44273e1-fd49-4e60-8c26-b3f84cfffebd.mp4

- And on my Local machine:
https://user-images.githubusercontent.com/29493222/185506184-7fb2ff2f-862b-4017-8dcb-d22953b14306.mp4




### Reproduction Link

https://splidejs.com/

### Steps to Reproduce

1. Open a virtual machine or RDP
2. Open Chrome, Firefox and Edge
3. Go to https://splidejs.com/ on all of them
4. Check that the autoplay doesn't work
5. Do the same using a tool like SauceLabs and open also Safari, checking that is the only one working
6. On your local machine, open Chrome, Firefox, Edge and Safari
7. Go to https://splidejs.com/ on all of them
8. Check that the autoplay works as expected

### Expected Behaviour

On an application using Splide v4.0.7 and setting the **autoplay=true**, it should work on all browsers and on VM, RDP connections and local machines

by design

Autoplay doesn't work on virtual machines on Chrome, Firefox, Edge

Good day guys, i was playing with splide and wanted to do a function where users can navigate through the index of the slider, and fire a function which will "slideTo" the specific slide Id, is that possible? If it is, how can i do that? Thanks in advance !!

Reference (something swiper made easy) :  
    swiper.slideTo(index.id);



Slide to specific slide Id ?

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4

### Description

How do I get the data attribute, for example slide2? I have tried pagination moved and can't get the attribute.  Javascript of Jquery solution?

<div class="splide" role="group" aria-label="Splide Basic HTML Example" >
  <div class="splide__track">

	    <ul class="splide__list">
	    <li class="splide__slide" data-slide="slide1">
            <div class="video-box splide__slide__container  ">
            <video preload="none" poster="vert2.png" autoplay muted loop playsinline>
            <source src="./videos/video2.mp4" type="video/mp4">
            </video>
            </div>
            </li>
			<li class="splide__slide"  data-slide="slide2">
            <div class="video-box splide__slide__container">
            <video preload="none" poster="vert2.png" autoplay muted loop playsinline>
            <source src="./videos/video3.mp4" type="video/mp4">
            </video>
            </div>
            </li>

	  <li class="splide__slide"  data-slide="slide3">
            <div class="video-box splide__slide__container">
            <video preload="none" poster="vert2.png" autoplay muted loop playsinline>
            <source src="./videos/video5.mp4" type="video/mp4">
            </video>
            </div>
            </li>
	</ul>
  </div>
</div>

    $(document).ready(function (e) {

    var splide = new Splide( '.splide', {
        type   : 'loop',
        snap   : true,
        direction   : 'ttb',
        height: '90vh'
    });

    splide.mount();

	splide.on( 'moved', function (newIndex, prevIndex, destIndex, slide, container) {
		console.log(newIndex);
		console.log(container)
	} );

    });

### Reproduction Link

https:

### Steps to Reproduce

see above

### Expected Behaviour

return slide1 or 2 or 3

How to get data attribute of current slide, moved pagination does not work

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.1.4

### Description

Hello,
With a basic Carousel (like https://splidejs.com/tutorials/image-carousel/), if i use figure/figcaption for the caption (for accessibility), the image shrinks.

`<div class="splide__slide__container">`
`       <figure ...>`
`           <img src="images/01.jpg" alt="Text alternative ...">`
`           <figcaption>Legend of the image ...</figcaption>`	
`       </figure>`
` </div>`


If i add slide container (https://splidejs.com/guides/structure/#slide-container) the image shrinks, because container is not a direct child of the splide__slide element.

`<div class="splide__slide__container">`
`       <figure ...>`
`            <div class="splide__slide__container">`
`       		    <img src="images/01.jpg" alt="Text alternative ...">`
`           </div>`
`           <figcaption>Legend of the image ...</figcaption>`	
`       </figure>`
` </div>`

Thank you in advance for your answer.
Best regards.

### Reproduction Link

_No response_

### Steps to Reproduce

Steps to reproduce are in the description.

### Expected Behaviour

Be able to use figures/figcaptions for the caption (for accessibility), without shrinking the image.

Accessibility : the image shrinks with figure/figcaption (and container does not solve the problem)

I'm working with Splide and wondering if it's possible to have the Play / Pause buttons for autoplay ([demo from the docs](https://splidejs.com/autoplay/)) as one button.

For example, if you play a video on YouTube, when you hit "►" the icon changes to "❚ ❚" and vice versa.

I was able to implement a rudimentary toggle via CSS based on `autoplay:play autoplay:playing` and `autoplay:pause` events, but this breaks accessibility because the focus stays on the hidden `<button>` and the text for the clicked button does not change—thus notifying visually impaired users something happened.

____________________________________

Been working on and off with Splide for a few weeks now. I am super impressed! It's a fine product. Thank you for your hard work.

Combine Play / Pause buttons?

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.0.0 with grid extension 0.4.0

### Description

Inspecting the slider in Safari on M1 Monterey 12.2.1 with Safari 15.3 and Chrome 99.0.4844.84 will eventually crash both browsers with these settings:

![image](https://user-images.githubusercontent.com/6605087/161920628-884bbae7-dfbc-457d-af9a-3adc9bc8eafd.png)

It will worsen quickly if i drag the inspecter back and forth while testing responsive modes (inspector on the right side of the browser).

It might be (another) issue on my end though.

Can provide video privately if needed as the project is not public yet.



### Reproduction Link

_No response_

### Steps to Reproduce

Slider with the following settings:

```js
new Splide( '#splide-statements', {
            type: 'loop',
            perPage:1,
            gap: '1rem',
            lazyLoad: 'nearby',
            drag: true,
            pagination:false,
            padding: '2rem',            
            mediaQuery: 'min', // Work with min-width instead of max-width for breakpoint definitions
            breakpoints: {
                1400: {
                    perPage: 4,
                },
                1200: {
                    perPage: 3,
                    grid: {
                        rows: 2,
                        gap: {
                            row: '2rem',
                        },
                    },
                    gap: '2rem',
                },
                600: {
                    perPage: 2,
                    grid: {
                        rows: 2,
                        gap: {
                            row: '1.5rem',
                        },
                    },
                    gap: '1.5rem',
                    drag: 'free',
                    snap: true, 
                    padding: '5rem',  
                },
            },
        }).mount( window.splide.Extensions );
```

Markup (Hubl):

```html
{# Carousel #}
        <div class="splide statements__carousel" id="splide-statements" role="group" aria-label="Dot Legal statements">
            <div class="splide__track">
                <ul class="splide__list">
                    {% for statement in module.statement %}
                        <li class="splide__slide">
                            <div class="statements__statement statement">
                                <div class="statement__intro">
                                    {# Image #}
                                    <div class="statement__image">
                                        <img data-splide-lazy="{{ statement.image.src }}" alt="{{ statement.image.alt }}">
                                    </div>
                                    {# Intro #}
                                    <div class="statement__info">                                    
                                        {# Name #}
                                        {{ statement.full_name }}
                                        {# Title #}                                            
                                        <span>{{ statement.job_title }}</span>
                                    </div>
                                </div>
                                {# Body #}
                                <div class="statement__body">
                                    {# Description #}
                                    {{ statement.the_statement|truncate(200, false, '...') }}
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            {# Custom arrows #}
            <div class="splide__arrows">
                <button class="splide__arrow splide__arrow--prev">
                    Prev
                </button>
                <button class="splide__arrow splide__arrow--next">
                    Next
                </button>
            </div>
        </div>
```

Open inspector, drag it around to test responsive modes, inspector should slow down and eventually crash.

Up until now the browser doesn't seem to crash if I poke around the slider without inspecting it.

### Expected Behaviour

Non-chrashing inspector.

Inspecting the slider in Safari and Chrome will eventually kill the browser

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v0.7.12

### Description

The slider is completly broken when we use decimal "perPage" values.

### Reproduction Link

https://jsfiddle.net/03e2jnp8/2/

### Steps to Reproduce

```JSX
<Splide 
  aria-label="bla bla bla" 
  options={{
    gap: "1rem",
    perPage: 2.5,     <--- use decimal
  }}
>
...
</Splide>
```

### Expected Behaviour

Slider completly broken... unable to scroll content

done

BUG FOR DECIPAL "perPage" VALUES

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.0.2

### Description

The splide__sr ellipses is read by screenreaders, which is confusing since it should be hidden.

https://user-images.githubusercontent.com/11084414/169388669-d1050f06-fc2e-4ce9-9fa2-724f86a40cba.mov



### Reproduction Link

https://splidejs.com/

### Steps to Reproduce

1. On homepage https://splidejs.com/ navigate forward on "Multiple Slides"
2. With voiceover, navigate through the elements with CONTROL + OPTION + RIGHT-ARROW
3. Run into hidden ellipses that is read aloud as a text element

### Expected Behaviour

Voiceover should skip

splide__sr ellipses is read by screenreader

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4

### Description

With autoplay, pagination and/or arrows, and a toggle buton are all enabled, the button state doesn't match the state of the carousel. Clicking a pagination or arrow button stops autoplay, but the toggle remains in a "playing" state. Clicking the toggle *twice* while Splide is paused will restart the autoplay. @

### Reproduction Link

https://splidejs.com/guides/autoplay/#play-pause-toggle-button

### Steps to Reproduce

1. enable autoplay and pagination
2. add a toggle button to the markup
3. start autoplay on the carousel
4. click a pagination button

Button state is still "playing" while the carousel is "paused"

### Expected Behaviour

The state of the toggle button should match the autoplay state of the carousel.

Autoplay toggle state not changed to 'paused' when pagination or arrows clicked

### Checks

- [x] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

"@splidejs/vue-splide": "^0.6.12",

### Description

Please tell me how to add Carousel Progress to Vue Splide. I am using with Nuxt 3.

I add it to the template. But the scripts don't work.
```vue
<template>
  <div class="py-8 md:container md:py-16" data-uk-height-viewport="expand: true">
    <Splide :options="option" aria-label="Scroll Carusel">
      <SplideSlide class="cursor-pointer overflow-hidden rounded-xl" v-for="item in unsplash" :key="item" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
        <img :src="item.img" alt="" />
      </SplideSlide>
    </Splide>

    
    <div class="my-slider-progress mt-10">
      <div class="my-slider-progress-bar "></div>
    </div>
  </div>
</template>

<script setup>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import '@splidejs/vue-splide/css/core';
import '@splidejs/vue-splide/css';
//import '@splidejs/vue-splide/css/skyblue';
//import '@splidejs/vue-splide/css/sea-green';

const option = {
  pagination : false,
  arrows     : true,
  //rewind : false,
  cover   : true,
  lazyLoad: 'nearby',
  //type   : 'loop',
  //perPage: 3,
  height  : '20rem',
  perPage: 4,
  perMove: 4,
  fixedWidth : '22.5%',
  //autoplay: false,
  //fixedHeight: '6rem',
  gap    : '16px',
  //height : '20rem',
  //updateOnMove: true,
  focus       : 'center',
  //snap   : true,
  drag   : 'free',
  //omitEnd: false,
  //autoWidth: true,
  //throttle: 1000,
  flickMaxPages: 1,
  padding: {
    left: '0px',
    right: '0px'
  },
  breakpoints: {
    768: {
      perMove: 1,
      fixedWidth : '80%',
      arrows     : false,
      padding: {
        left: '16px',
        right: '16px',
      },
    },
  },
}

const unsplash = reactive([
  {img: 'https://source.unsplash.com/random/301'},
  {img: 'https://source.unsplash.com/random/302'},
  {img: 'https://source.unsplash.com/random/303'},
  {img: 'https://source.unsplash.com/random/304'},
  {img: 'https://source.unsplash.com/random/305'},
  {img: 'https://source.unsplash.com/random/301'},
  {img: 'https://source.unsplash.com/random/302'},
  {img: 'https://source.unsplash.com/random/303'},
  {img: 'https://source.unsplash.com/random/304'},
])

useHead({
  script: [
    { src: '/js/script.js', body: true },
  ],
})
</script>

<style>

.splide {
  padding: 20px 0;
}

.splide .splide__arrow {
  top: 0;
  bottom: 0;
  height: 100%;
  transform: none;
  border-radius: unset;
  width: 50px;
  opacity: 0.9;
}

.splide__arrow.splide__arrow--prev {
  left: 0;
  background: linear-gradient(90deg, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%);
}

.splide__arrow.splide__arrow--next {
  right: 0;
  background: linear-gradient(270deg, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%);
}

.splide__arrow--prev {
  @apply !left-[-1.5rem];
}
.splide__arrow--next {
  @apply !right-[-1.5rem];
}

/* Gestaltung des aktiven Slides (optional) */
.is-active {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ScrollBar*/

.my-slider-progress {
  background: #ccc;
}

.my-slider-progress-bar {
  background: greenyellow;
  height: 2px;
  transition: width 400ms ease;
  width: 0;
}
</style>
```
```js
var splide = new Splide( '.splide' );
var bar = splide.root.querySelector( '.my-slider-progress-bar' );

// Updates the bar width whenever the carousel moves:
splide.on( 'mounted move', function () {
  var end  = splide.Components.Controller.getEnd() + 1;
  var rate = Math.min( ( splide.index + 1 ) / end, 1 );
  bar.style.width = String( 100 * rate ) + '%';
} );```

And the console gives an error
Uncaught ReferenceError: Splide is not defined
<anonymous> http://localhost:3000/js/script.js:1
    


### Reproduction Link

_No response_

### Steps to Reproduce

Carousel Progress

### Expected Behaviour

Carousel Progress Works

Carousel Progress In Nuxt 3

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

4.0.6

### Description

Hi, firstly thanks for your continued efforts towards accessibility on this project.

I'm facing an issue when testing a looping Splide slider which contains 3 slides, each containing a header, paragraph and link, using NVDA screen reader. When the slides are transitioned (either by hitting the enter button when focused on a prev/next arrow or by hitting left/right arrows when focused on the pagination dots) the screen-reader reads all of the text from the links in all of the slides regardless of which slide is active as well as the non-link text from the active slide. It does this for all instances of the slides in the mark-up so when set to loop and you have 3 slides, this gets read out 6 times.

### Reproduction Link

https://codepen.io/danb1/pen/gOvjJoa

### Steps to Reproduce

1. Create an instance of Splide 4.0.6 with 3 slides, each containing a heading, paragraph and link. 
2. Set the slider to loop.
3. Browse the slider with NVDA screen-reader and observe what is spoken when the slider is transitioned using either forward/back buttons or pagination.

### Expected Behaviour

I would expect that only the content of the active slide is read out when a slide is transitioned. It should not announce content from non-active slides. I would expect that the active slide content is only announced once even if the slider is set to loop and there is duplicate mark-up for each of the slides.

NVDA repeats content of all slides when slide is changed and slides contain links

The library use's aria-hidden attribute to keep slide's visible that are out of view. Which works if the content inside the slide is not interactive (image, text). If the slide contains interactive element's (link, button, form controls, etc) this technique won't work. 

Since you can't us aria-hidden on a parent of whose children contain interactive elements, as assistive devices will still focus them. They stay in the focus order in the document. [Reference Link](https://dequeuniversity.com/rules/axe/4.1/aria-hidden-focus?application=RuleDescription).

I thought I might point this out incase you want to elaborate on the limitation in the Accessibility part of the documentation.

**Also when in accessibility mode you might be able to (just ideas):**

- Force use of the fade transition only, so you can use visibility: hidden (keep height in flex layout) or display: none on the non-visible slides. To hide them in an accessible way that supports any slide content
- Or, for the sliding animation:  only show the exiting slides during the sliding transition, apply aria-hidden on them to remove from reading order during the transition only. Since the likelihood of the user navigating during the transition is low. Then once the slide transition is finished hide them with visibility hidden and remove the temporary aria-hidden attribute and focus the slide




Accessibility Issue if you have interactive content in your slides

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

"@splidejs/splide": "^4.0.1",

### Description

If I use the official example 
```
    <div class="splide" role="group" aria-label="Splide Basic HTML Example">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide">Slide 01</li>
          <li class="splide__slide">Slide 02</li>
          <li class="splide__slide">Slide 03</li>
        </ul>
      </div>
    </div>
```
![image](https://user-images.githubusercontent.com/1224004/163618273-ea57a6f6-4b6d-4c7d-8286-e501f442cbdf.png)

I want to have only 3 item in my pagination

### Reproduction Link

_No response_

### Steps to Reproduce

use the official example on the official website

### Expected Behaviour

have the good number of pagination points

pagination is duplicated

I have noticed that the JS add `tabindex="0"` to the current slide and `-1` to the hidden slides. I think this breaks the accessibility  as tabindex is needed only for user-actioned elements like buttons, links etc. So, when you navigate with a keyboard you get stucked on an empty selector which does not do anything and then go to the pagination items.

Let me know your thoughts on this.

tabindex for slides

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.0.1

### Description

The option pauseOnHover doesn't seem to work when set to false, but keeps defaulting to true (hovering stops the automatic carousel).
I also tried "false" as a string and 0 as values when just false didn't work, but to no avail.



### Reproduction Link

https://staging.centarznr.hr/

### Steps to Reproduce

- Import Splide 4.0.1 min.js, min.css + autoscroll v0.4.2 via direct CDN link copy as new file in WP project.
- add following code:

```
// init
document.addEventListener("DOMContentLoaded", function () {
  var splide = new Splide(".splide", {
    type: "loop",
    focus: "center",
    rewind: true,
    arrows: false,
    pagination: false,
    drag: false,
    pauseOnHover: false,
    perPage: 4,
    autoScroll: {
      speed: 1,
    },
  });
  splide.mount(window.splide.Extensions);
});
```

```
//actual carousel
     <section class="splide" aria-label="Splide Basic HTML Example">
            <div class="splide__track">
               <ul class="splide__list">
                  <?php foreach (get_field('clients_slider') as $clients) { ?>
                     <li class="img-wrapper splide__slide">
                        <img src="<?php echo $clients['image']; ?>" alt="client-img" />
                     </li>
                  <?php } ?>
               </ul>
            </div>
         </section>
```

### Expected Behaviour

Carousel should not stop when hovered over.

pauseOnHover: false not working

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.0.0 with grid extension 0.4.0

### Description

Next and prev buttons not animating slide changes on iOS 15.4.1, however dragging is working fine. Same on the official website.

Is this intended, a setting or a bug? Can't seem to find anything on the matter in the documentation :/

### Reproduction Link

_No response_

### Steps to Reproduce

Open safari on an iOS device with iOS 15.4.1, go to the official website and tap the next/prev buttons.

### Expected Behaviour

Animating slides

Next/prev buttons click/tap not animating on iOS 15.4.1 in safari

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

3

### Description

When using keyboard, focusing the next / previous arrows do not get a focus style. Therefore it is not clear for keyboard users where their focus is.

The offender is this css .splide__arrow:focus{outline:none}

Modern browsers use `:focus-visible` to only show the focus style for keyboard users by default.

### Reproduction Link

https://splidejs.com/

### Steps to Reproduce

1. Hit the tab key on your keyboard to focus the next / previous slider buttons - there is no focus style

### Expected Behaviour

Focused controls need a focus style. Remove the CSS mentioned above.

A11y: Enable default focus style

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

"@splidejs/splide": "^4.0.1",

### Description

I recently upgraded to 4.0.1 version and my slider stopped working.

After debugging, I found that If I initialize slider with `.splide` class it is working fine but If I use another class name then it showing a console error. Please check the screenshot.

There is one slider that has a Thumbnails navigation slide. Where I can not use the same class. Need some solution, please.

<img width="614" alt="Screenshot 2022-04-08 at 11 13 58 AM" src="https://user-images.githubusercontent.com/11607839/162372215-4f228789-2cce-4685-af81-4e26a06c4718.png">


### Reproduction Link

_No response_

### Steps to Reproduce

Create any slider markup class: _**js-Splide**_ and initialize the slider.
I think if it's resolved Thumbnails navigation will also be resolved. 

```html
<section class="jsSplide" aria-label="Splide Basic HTML Example">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
	</div>
</section>
```

```js
<script>
	document.addEventListener( 'DOMContentLoaded', function() {
	var splide = new Splide( '.jsSplide' );
	splide.mount();
	} );
</script>
```

### Expected Behaviour

The slider should work without any error.

Console Error: splide.esm.js:366 Uncaught Error: [splide] A track/list element is missing.

I notice that on initial the aria hidden on slides are not set until you actually traverse all slides. I understand on default type the slides are a group of a list and as you read them with a screen reader it reveals the slides but when using type loop screen reader still reads hidden non visible slides and doesn't change to the slide being read. As I understand any hidden elements should not be detected by screen reader. Once again I undestand if not set to loop you still can go through the list with no animation and that content becomes visible but on type loop I think slides cloned or not visible should be hidden and not detected by screen reader. It's a bit confusing how the screen reader handles this. Testing on safari with voiceOver. 

On initial aria-hidden on slides are not set

Hi, I'm getting some errors using splide with typescript .

On [ name: string ]: Component; (L 378) :

Interface for a general component.

Property 'A11y' of type 'A11y | undefined' is not assignable to string index type 'Component'.ts(2411)
Property 'Arrows' of type 'Arrows | undefined' is not assignable to string index type 'Component'.ts(2411)
Property 'Autoplay' of type 'Autoplay | undefined' is not assignable to string index type 'Component'.ts(2411)
Property 'Breakpoints' of type 'Breakpoints | undefined' is not assignable to string index type 'Component'.ts(2411)
Property 'Click' of type 'Click | undefined' is not assignable to string index type 'Component'.ts(2411)
Property 'Clones' of type 'Clones | undefined' is not assignable to string index type 'Component'.ts(2411)
Property 'Controller' of type 'Controller | undefined' is not assignable to string index type 'Component'.ts(2411)

and destroy(); (L 308) : 
'destroy', which lacks return-type annotation, implicitly has an 'any' return type.

Thanks

Errors in splide.d.ts

I whish to know if it's possible to use this slider using only keyboard keys, as, per example, arrows keys to scroll left / right selecting the elements, and some other key to execute some code when the slider element is focused.

In my project (a video player) there is no mouse.

Thank you very much for some help.

Is it possible to use only keyboard to scroll / select elements in slider?

Hi, 

I'm using the component in Thumbnails mode; so I have two Splide instance that are mounted together. 
In my code I do something like this:
```javascript
sliderComponent = new Splide( sliderMainContainer, {
	fixedWidth : 100,
	height : 60,
	gap : 10,
	cover : true,
	isNavigation: true,
	pagination: false,
	focus : 'center',
	breakpoints : {
		'600': {
			fixedWidth: 66,
			height    : 40,
		}
	},
} ).mount();

previewSplide = new Splide( previewSplideMainContainer, {
	type : 'fade',
	pagination : false,
	cover : true,
	video: {
		autoplay: false,
		mute    : false,
	},
} ); // do not call mount() here.

previewSplide.sync( sliderComponent ).mount( window.splide.Extensions );
```
As you can see I add the extension only on the Splide component that will show biggest images.

When I add items to the two Splide component I execute the following 
```javascript
//img is the youtube url

//for each splide instance I add element
splideArray.forEach ( splide => {	
      var liElem = document.createElement('li');
      liElem.className = "splide__slide";
      
       //check if is valid youtube url                                
      var validYoutubeUrl = isValidYouTubeUrl(img);
      
      //if is the primary Slider add data-splide-youtube attribute
      if ( validYoutubeUrl && splide.root.className.indexOf("splide--primary") > -1 ) {
	      liElem.setAttribute("data-splide-youtube", img)
      }
      
      var imgElem = document.createElement('img');
      //this method create a thumbnail image from the youtube video
      imgElem.src =  getYoutubeURLKey(img) ;
      liElem.appendChild(imgElem);
      
      splide.add( liElem );
});
```
All works fine at the first time.

In my page I created an add button for insert a new video; click event calls a method that repeat the previous code.

So when I click the button and repeat the code for the second times, a slide is added in each Splide instance, but for the instance that must render the video a wrong slide structure is created:
```html
<li class="splide__slide is-active is-visible" data-splide-youtube="https://www.youtube.com/watch?v=bvC_0foemLY&amp;list=RDkhDxCSlyMXQ&amp;index=7" id="splide02-slide06" style="background: url(&quot;http://img.youtube.com/vi/bvC_0foemLY/0.jpg&quot;) center center / cover no-repeat; transition: opacity 400ms cubic-bezier(0.42, 0.65, 0.27, 0.99) 0s;" aria-hidden="false" tabindex="0">
      <img src="//img.youtube.com/vi/bvC_0foemLY/0.jpg" style="display: none;">
</li>
```
The correct slide video structure is:
```html
<li class="splide__slide splide__slide--has-video" data-splide-youtube="https://www.youtube.com/watch?v=Sz7imBbNtA0" id="splide02-slide04" style="background: url(&quot;http://img.youtube.com/vi/Sz7imBbNtA0/0.jpg&quot;) center center / cover no-repeat; transition: opacity 400ms cubic-bezier(0.42, 0.65, 0.27, 0.99) 0s;" aria-hidden="true" tabindex="-1">
   <img src="//img.youtube.com/vi/Sz7imBbNtA0/0.jpg" style="display: none;">
   <button class="splide__video__play" style="display: flex;"></button>
   <div class="splide__video" style="display: none;">
        <div></div>
   </div>
</li>
```

As you can see the play button and the container of the iframe are missing and, in the `li` component, the class `spide__slide--has-video` is absent.

Am I doing something wrong?


Dynamically add YouTube video

I have a slide gallery with thumbnails, and I'm using my own button images.

My issue is it looks like the buttons are being disabled when they shouldn't be. I can't click them to progress to the next slide because they're disabled, even though there are many items in the splide list.

Any thoughts?

Here's the source code that was produced from my JS:
```<div class="cmp-mediagallery">
  <div id="mediaGallery" class="cmp-mediagallery__top splide splide--fade splide--ltr splide--draggable is-active" style="visibility: visible;">
    <div class="splide__track" id="mediaGallery-track">
      <ul class="splide__list" id="mediaGallery-list">
          
            <li class="cmp-mediagallery__top-item splide__slide is-active is-visible" id="mediaGallery-slide01" aria-hidden="false" tabindex="0" style="width: 920px; height: 570.4px; transition: opacity 400ms cubic-bezier(0.42, 0.65, 0.27, 0.99) 0s; background: url('images/CLR7256_MY20_Contact_Us.jpg') center center / cover no-repeat;">
              <img src="images/CLR7256_MY20_Contact_Us.jpg" alt="Fast boat." style="display: none;">
            </li>
          
            <li class="cmp-mediagallery__top-item splide__slide" id="mediaGallery-slide02" style="width: 920px; height: 570.4px; background: url('images/Conquest-1-1.jpg') center center / cover no-repeat;">
              <img src="images/Conquest-1-1.jpg" alt="Fishing boat." style="display: none;">
            </li>
          
            <li class="cmp-mediagallery__top-item splide__slide" id="mediaGallery-slide03" style="width: 920px; height: 570.4px; background: url('images/Boat%203.jpg') center center / cover no-repeat;">
              <img src="images/Boat%203.jpg" alt="Trailered boat." style="display: none;">
            </li>
          
            <li class="cmp-mediagallery__top-item splide__slide" id="mediaGallery-slide04" style="width: 920px; height: 570.4px; background: url('images/spx1.jpg') center center / cover no-repeat;">
              <img src="images/spx1.jpg" alt="Boat boat." style="display: none;">
            </li>
          
            <li class="cmp-mediagallery__top-item splide__slide" id="mediaGallery-slide05" style="width: 920px; height: 570.4px; background: url('images/Boat%201.PNG') center center / cover no-repeat;">
              <img src="images/Boat%201.PNG" alt="Grounded boat." style="display: none;">
            </li>
        
      </ul>
    </div>
  </div>
  <div id="mediaGalleryThumbs" class="cmp-mediagallery__bottom splide splide--slide splide--ltr splide--draggable splide--nav is-active" style="visibility: visible;">
    <div class="cmp-mediagallery-thumb-container splide__track" id="mediaGalleryThumbs-track">
      <ul class="splide__list" id="mediaGalleryThumbs-list" style="transform: translateX(20px);">
          
            <li class="cmp-mediagallery__bottom-item splide__slide is-active is-visible" id="mediaGalleryThumbs-slide01" aria-current="true" aria-hidden="false" tabindex="0" role="button" aria-label="Go to slide 1" aria-controls="mediaGallery-slide01" style="margin-right: 10px; width: 172px; height: 108px; background: url('images/CLR7256_MY20_Contact_Us.jpg') center center / cover no-repeat;">
              <img src="images/CLR7256_MY20_Contact_Us.jpg" alt="Fast boat." style="display: none;">
            </li>
          
            <li class="cmp-mediagallery__bottom-item splide__slide is-visible" id="mediaGalleryThumbs-slide02" aria-hidden="false" tabindex="0" role="button" aria-label="Go to slide 2" aria-controls="mediaGallery-slide02" style="margin-right: 10px; width: 172px; height: 108px; background: url('images/Conquest-1-1.jpg') center center / cover no-repeat;">
              <img src="images/Conquest-1-1.jpg" alt="Fishing boat." style="display: none;">
            </li>
          
            <li class="cmp-mediagallery__bottom-item splide__slide is-visible" id="mediaGalleryThumbs-slide03" aria-hidden="false" tabindex="0" role="button" aria-label="Go to slide 3" aria-controls="mediaGallery-slide03" style="margin-right: 10px; width: 172px; height: 108px; background: url('images/Boat%203.jpg') center center / cover no-repeat;">
              <img src="images/Boat%203.jpg" alt="Trailered boat." style="display: none;">
            </li>
          
            <li class="cmp-mediagallery__bottom-item splide__slide is-visible" id="mediaGalleryThumbs-slide04" aria-hidden="false" tabindex="0" role="button" aria-label="Go to slide 4" aria-controls="mediaGallery-slide04" style="margin-right: 10px; width: 172px; height: 108px; background: url('images/spx1.jpg') center center / cover no-repeat;">
              <img src="images/spx1.jpg" alt="Boat boat." style="display: none;">
            </li>
          
            <li class="cmp-mediagallery__bottom-item splide__slide is-visible" id="mediaGalleryThumbs-slide05" aria-hidden="false" tabindex="0" role="button" aria-label="Go to slide 5" aria-controls="mediaGallery-slide05" style="margin-right: 10px; width: 172px; height: 108px; background: url('images/Boat%201.PNG') center center / cover no-repeat;">
              <img src="images/Boat%201.PNG" alt="Grounded boat." style="display: none;">
            </li>
          
      </ul>
    </div>
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--prev" aria-controls="mediaGalleryThumbs-track" disabled="" aria-label="Previous slide">
        <img class="cmp-mediagallery_arrow" src="/images/left-carousel-arrow.png">
      </button>
      <button class="splide__arrow splide__arrow--next" aria-controls="mediaGalleryThumbs-track" disabled="" aria-label="Next slide">
        <img class="cmp-mediagallery_arrow" src="/images/right-carousel-arrow.png">
      </button>
    </div>
  <ul class="splide__pagination"><li><button class="splide__pagination__page is-active" type="button" aria-current="true" aria-controls="mediaGalleryThumbs-slide01" aria-label="Go to slide 1"></button></li><li><button class="splide__pagination__page" type="button" aria-controls="mediaGalleryThumbs-slide02" aria-label="Go to slide 2"></button></li><li><button class="splide__pagination__page" type="button" aria-controls="mediaGalleryThumbs-slide03" aria-label="Go to slide 3"></button></li><li><button class="splide__pagination__page" type="button" aria-controls="mediaGalleryThumbs-slide04" aria-label="Go to slide 4"></button></li><li><button class="splide__pagination__page" type="button" aria-controls="mediaGalleryThumbs-slide05" aria-label="Go to slide 5"></button></li></ul></div>
</div>```

Buttons disabled even though there are multiple images?

To avoid the error you can disable arrows only when destroy is false:
```
new Splide('#splide-slider', {
  ...otherConfig,
  destroy: true,
  breakpoints: {
    639: {
      arrows: false,
      destroy: false,
    },
  },
}).mount();
```
But I think it should be fixed checking if `Components.Arrows` is null in this line: https://github.com/Splidejs/splide/blob/ac771b656352dbd3e2ad4e9b4d68101b2b875ac4/src/js/components/a11y/index.js#L75

Slider throw error when destroyed and the arrows options is false

It would be cool if I could use CSS custom properties in gap and padding, so I can use our style guide and don't need to look for the value or update it later when our style guide changed.

Something like:

```js
    new Splide(this.sliderEl.nativeElement, {
      // https://splidejs.com/options/
      type: 'slide',
      gap: 'var(--spacing-md)',
      arrows: false,
      pagination: false,
      autoWidth: true,
    }).mount({})
```

Allow custom properties in gap and padding

Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.

@splidejs/splide

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.1.4

### Description

According to the [Carousel (Slide Show or Image Rotator) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/) explained on W3C's ARIA Authoring Practices Guide, each slide container (`.splide__slide`) of a Tabbed Carousel _"does not have the `aria-roledescription` property"_.

However, currently, all slide containers have the `aria-roledescription` property.

### Reproduction Link

_No response_

### Steps to Reproduce

1. Create a tabbed carousel

### Expected Behaviour

All slide containers do not have the `aria-roledescription` property.

Tabpanels have the aria-roledescription property

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.1.4

### Description

The `aria-label` attribute is getting removed from my custom arrows markup.

I am creating custom arrows for the slider with the following markup:
```html
<div class="splide slider__slider">
      <div class="splide__arrows slider-controls">
          <button class="splide__arrow splide__arrow--prev slider-control slider-control--prev" aria-label="Previous slide">
              
          </button>
          <button class="splide__arrow splide__arrow--next slider-control slider-control--next" aria-label="Next slide">
              
          </button>
      </div>
      
      <div class="splide__track slider__track">
          
      </div>    
  </div>
```

I expected the buttons to have the `aria-label="Previous slide"` on the frontend, but they don't. They have the `aria-controls="..."` attribute (which is added automatically), but not the `aria-label` which i define on my template

![image](https://user-images.githubusercontent.com/42058106/224961925-3bcdadbe-6c59-4139-b4a5-a1ac5ba1362c.png)


### Reproduction Link

_No response_

### Steps to Reproduce

1. Create custom arrow markup
2. Add `aria-label` attribute to the arrow buttons
3. Open the slider on a browser

### Expected Behaviour

I expected to see my `aria-label` attributes on the FE if i define them on my custom arrows markup

custom arrow aria-label gets removed

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

0.6.12

### Description

<div style='transform: scale(0.66094, 0.66094) translate(-50%, -50%);'>
          <Splide
            :options="{ rewind: true, autoplay: true, arrows: false, speed: 1000 }"
            aria-label="Vue Splide Example"
          >
            <SplideSlide>
              <publicEcharts :options="carouselThreeOption1" height="200px" />
            </SplideSlide>
            <SplideSlide>
              <publicEcharts :options="carouselThreeOption2" height="200px" />
            </SplideSlide>
            <SplideSlide>
              <publicEcharts :options="carouselThreeOption3" height="200px" />
            </SplideSlide>
          </Splide>
</div>

### Reproduction Link

_No response_

### Steps to Reproduce

use style='transform: scale(0.66094, 0.66094) translate(-50%, `-50%);'  Uneven width in automatic movement
![image](https://user-images.githubusercontent.com/52391986/226504485-48aabc63-89e1-4075-ada8-54a690782a74.png)


### Expected Behaviour

width orderly

use transform: scale width error

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4

### Description

See the example code setup here..

https://codepen.io/wplit/pen/VwBmpOG

The second slider has both 'direction: 'ttb' and is also being synced, so it controls the first slider. The result is that the aria labels given do not match their roles.

Live site with the same code as above, so it's easy to test in Lighthouse / Google Page Speed

https://wordpress-356482-3367986.cloudwaysapps.com/

### Reproduction Link

https://wordpress-356482-3367986.cloudwaysapps.com/

### Steps to Reproduce

Copy the code as seen in the codepen I shared. it's taken straight from the docs, and only the vertical layout has been added.



### Expected Behaviour

Aria labels need to change for this specific setup.

Combination of 'direction: 'ttb' and being navigation for another slide shows aria warnings.

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

4.1.4

### Description

Autoplay simply doesn't work.

### Reproduction Link

https://codepen.io/guyman20/pen/VwGgQma

### Steps to Reproduce

None

### Expected Behaviour

The slider should autoplay, as mentioned in the properties.

Autplay doesn't work

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

4.1.4

### Description

I am destroying the slide at 768px > browsers. The slider is destroyed successfully, but the `tabindex="-1"` is not removed from the descendent links in all of the elements. In my case, all of the individual elements have links inside. Because of this, a user cannot tab through the items.  `destroy` also does _not_ remove the IDs that are added to each slide, this however, does not affect the user's ability to tab through elements, so it is not an accessibility issue. 

Below are my options.

```type: 'loop',
		perPage: 1, 
		arrows: false,
		gap: '1rem', 
		focus: 0,
		mediaQuery: 'min',
		breakpoints: {
			0: {
				perPage: 1,
				arrows: false,
			},
			768: {
				destroy: 'completely'
			}
	  	}
```
Screenshot of markup showing tabindex and ID.
![splide-tabindex](https://user-images.githubusercontent.com/313852/228327575-064336bc-f65b-4b11-b005-b391d3a25875.png)

### Reproduction Link

_No response_

### Steps to Reproduce

1. Load page in browser wider than 768px
2. Try to tab through each element.


### Expected Behaviour

Expect that the `tabindex="-1"` would be removed as part of the `destroy` function.

Destroy does not remove `tabindex="-1"` from all items causing an accessibility issue

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Versions

3.2.2, 3.2.5, 3.2.7, 3.6.6

### Description

This is a duplicate of #482, which is closed, but seems to still be broken for me. I was using 3.2.2, but then tried other versions.

Apologies for not providing a reproduction. The behaviour seems to be: 

- I have four items
- if I go right, I would expect to go 1 -> 2 -> 3 -> 4. Instead it's 1  -> 4 -> 1 -> 2 -> 3 -> 4
- if I go left, I would expect to go 1 -> 4 -> 3 -> 2 . Instead it's 1  -> 3 -> 1 -> 4 -> 3 -> 2 
- so it seems I always get one wrong item, then a repetition of the starting item, and then it starts working correctly


Feel free to close if the solution is not easy. I would like to migrate to 4, but haven't managed it yet.

Clicking prev & next jumps to the wrong item in loop mode

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

@splidejs/react-splide v0.7.12

### Description

I have config like below, splide will break down after change viewport and wheel.

```js
<Splide
    aria-label="characters"
    hasTrack={false}
    options={{
        // gap: "1rem",
        type: "loop",
        perPage: 3,
        focus: "center",
        padding: "15%",
        waitForTransition: true,
        wheel: true,
        speed: 1000,
        updateOnMove: true,
        arrows: true,
        pagination: false,
        breakpoints: {
            1400: {
                perPage: 2,
                padding: "22%",
            },
            1200: {
                perPage: 2,
                padding: "12%",
            }
        },
    }}
    onMove={(splide, index, prev, dest) => {
          setPinsRotateAngel(-Pins.angle_unit * index)
          setCurrIndex(index + 1)
    }} 
>
    <SplideTrack>
        {Array.from(Array(total)).map((e, i) => (
            <SplideSlide key={`slide-${i}`}>
                <h1>slide {i}</h1>
            </SplideSlide>
        ))}
    </SplideTrack>
</Splide>
```

### Reproduction Link

_No response_

### Steps to Reproduce

1. create splide react component, must write `onMove` event and include a setState function:
2. open broswer, making it's width bigger than 1400
3. change broswer width smaller than 1200
4. wheel your mouse
5. break down...

### Expected Behaviour

splide runs normally

Splide React will break down by wheel after change viewport when set breakpoints

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

0.7.12

### Description

Slider works but in report I receives an error 

Could not find a declaration file for module '@splidejs/react-splide'. 'path-to-lib' implicitly has an 'any' type.
  There are types at 'path-to-lib-index.d-ts', but this result could not be resolved when respecting package.json "exports". The '@splidejs/react-splide' library may need to update its package.json or typings.ts(7016)
Could not find a declaration file for module '@splidejs/react-splide'. 'path-to-lib/react-splide.esm.js' implicitly has an 'any' type.
  There are types at 'path-to-lib/dist/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@splidejs/react-splide' library may need to update its package.json or typings.ts(7016)

### Reproduction Link

_No response_

### Steps to Reproduce

Im just importing import { Splide, SplideSlide } from '@splidejs/react-splide'

### Expected Behaviour

Error highlight should not be displayed

Import with typescript highlights error

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

4.1.4

### Description

First of all, thanks for Splide. It's a really great library to work with, and I love it! :sparkling_heart: 

Today I encountered an issue with slides which contain elements that have `tabindex="-1"`.
The `tabindex` attribute is lost even though it was intentionally set to -1.

I understand this is because of the `focusableNodes` option and that focusable nodes in invisible slides need a negative tabindex.


### Reproduction Link

https://codepen.io/foobear/pen/VwVwjKe

### Steps to Reproduce

1. Have elements in slides with negative tabindex

### Expected Behaviour

Ideally, Splide should store any previous `tabindex` value (maybe simply in an HTML attribute on the element) and, instead of removing `tabindex` when slides become visible, restore such a previous value.

tabindex="-1" removed from elements inside visible slides

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.x.x

### Description

hello, world!

I  am using splide-vue in rtl. things work fine except for the arrows!

**disabled the other CSSs and JSs to make sure it's splide only!**
look at the image below:
<img src="https://imgtr.ee/images/2023/06/08/DQriF.png" alt="DQriF.png" border="0" />

my component code:
```
<template>
            <div class="col-lg-8 col-md-12 mb-4">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">اطلاعیه ها</h5>
                    </div>
                    <div class="card-body pb-4">
                        <Splide :options="main_options" aria-label="Main Carousel">
                            <SplideSlide>
                                <img src="/assets/img/layouts/layout-collapsed-menu-dark.png" alt="Sample 1">
                            </SplideSlide>
                            <SplideSlide>
                                <img src="/assets/img/layouts/layout-collapsed-menu-light.png" alt="Sample 2">
                            </SplideSlide>
                            <SplideSlide>
                                <img src="/assets/img/layouts/layout-content-navbar-and-sidebar-light.png"
                                     alt="Sample 2">
                            </SplideSlide>
                        </Splide>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-12 mb-4">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">اطلاعیه ها</h5>
                    </div>
                    <div class="card-body pb-4">
                        <Splide :options="news_options" :classes="news_classes" aria-label="News Carousel">
                            <SplideSlide>
                                <a href="./pages-help-center-article.html" class="d-flex fw-semibold">
                                    <i class="bx bx-chevron-right scaleX-n1-rtl text-muted bx-sm me-1"></i>
                                    مراحل قیمت گذاری
                                </a>
                            </SplideSlide>
                            <SplideSlide>
                                <a href="./pages-help-center-article.html" class="d-flex fw-semibold">
                                    <i class="bx bx-chevron-right scaleX-n1-rtl text-muted bx-sm me-1"></i>
                                    مراحل قیمت گذاری
                                </a>
                            </SplideSlide>
                            <SplideSlide>
                                <a href="./pages-help-center-article.html" class="d-flex fw-semibold">
                                    <i class="bx bx-chevron-right scaleX-n1-rtl text-muted bx-sm me-1"></i>
                                    مراحل قیمت گذاری
                                </a>
                            </SplideSlide>
                            <SplideSlide>
                                <a href="./pages-help-center-article.html" class="d-flex fw-semibold">
                                    <i class="bx bx-chevron-right scaleX-n1-rtl text-muted bx-sm me-1"></i>
                                    مراحل قیمت گذاری
                                </a>
                            </SplideSlide>
                            <SplideSlide>
                                <a href="./pages-help-center-article.html" class="d-flex fw-semibold">
                                    <i class="bx bx-chevron-right scaleX-n1-rtl text-muted bx-sm me-1"></i>
                                    مراحل قیمت گذاری
                                </a>
                            </SplideSlide>
                            <SplideSlide>
                                <a href="./pages-help-center-article.html" class="d-flex fw-semibold">
                                    <i class="bx bx-chevron-right scaleX-n1-rtl text-muted bx-sm me-1"></i>
                                    مراحل قیمت گذاری
                                </a>
                            </SplideSlide>
                            <SplideSlide>
                                <a href="./pages-help-center-article.html" class="d-flex fw-semibold">
                                    <i class="bx bx-chevron-right scaleX-n1-rtl text-muted bx-sm me-1"></i>
                                    مراحل قیمت گذاری
                                </a>
                            </SplideSlide>
                            <SplideSlide>
                                <a href="./pages-help-center-article.html" class="d-flex fw-semibold">
                                    <i class="bx bx-chevron-right scaleX-n1-rtl text-muted bx-sm me-1"></i>
                                    مراحل قیمت گذاری
                                </a>
                            </SplideSlide>
                        </Splide>
                    </div>
                </div>
            </div>
</template>
<script>
import {Splide, SplideSlide} from '@splidejs/vue-splide';
import '@splidejs/vue-splide/css/skyblue';


export default {
    name: "MainComponent",
    components: {
        Splide,
        SplideSlide,
    },
    setup() {
        return {
            main_options: {
                type: 'loop',
                direction: 'rtl',
                rewind: true,
                autoplay: true,
                pauseOnHover: true,
                width: 900,
                height: 300,
            },
            news_options: {
                type: 'loop',
                perPage: 5,
                direction: 'ttb',
                height: 300,
                wheel: true,
                pagination: false,
            },
            news_classes: {
                next: 'splide__arrow--next news__next',
            },
        }
    },
}
</script>

<style scoped>
.news__next {
    right: auto !important;
}
</style>
```

wrong things:
1. the arrows are inside the slider
2. for the ttb (top to bottom) slider, the bottom arrow is in the wrong place! (it is not in the middle)

also, I tried a custom CSS class to fix the bottom arrow but did not work.


### Reproduction Link

_No response_

### Steps to Reproduce

wroten in description

### Expected Behaviour

1. the arrows are inside the slider
2. for the ttb (top to bottom) slider, the bottom arrow is in the wrong place! (it is not in the middle)

Wrong Arrows

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

V4

### Description

Lighthouse test now reporting "Values assigned to role="" are not valid ARIA roles." 
<img width="801" alt="image" src="https://github.com/Splidejs/splide/assets/265857/6586c0ca-9611-43b0-89b3-377da90649b8">
[Light house report for splide home page ](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fsplidejs.com%2F&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext)

### Reproduction Link

https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fsplidejs.com%2F&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext

### Steps to Reproduce

1. visit https://splidejs.com/ in Chrome
2. Rung lighthouse test with chrome extension 

### Expected Behaviour

no Lighthouse errors

Lighthouse Accessibility warning 

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

^0.7.12

### Description

Hello ! 

I found nothing on internet so I decided to post it here. Sorry if it is not the right place, please tell me where I can find help if it is not.

I have a NextJS project with Storybook (I don't think this is because of it, but we never know) and Typescript. When I try to import SplideJS React, I have an error.

```
Could not find a declaration file for module '@splidejs/react-splide'. 'c:/Users/Laura/Desktop/Inside-Software-Website-Front-End/node_modules/@splidejs/react-splide/dist/js/react-splide.esm.js' implicitly has an 'any' type.
  There are types at 'c:/Users/Laura/Desktop/Inside-Software-Website-Front-End/node_modules/@splidejs/react-splide/dist/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@splidejs/react-splide' library may need to update its package.json or typings.ts(7016)
```

When trying to build my project through Vercel I have this Typesript error : 
```
Failed to compile.
--
13:16:28.341 |  
13:16:28.342 | ./components/Footer/Body/index.tsx:8:25
13:16:28.342 | Type error: Module '"./NavList"' has no exported member 'FooterNavListProps'. Did you mean to use 'import FooterNavListProps from "./NavList"' instead?
13:16:28.342 |  
13:16:28.342 | 6 \|   footerNavListSocialsTitleStyle,
13:16:28.342 | 7 \| } from "../styles";
13:16:28.342 | >  8 \| import FooterNavList, { FooterNavListProps } from "./NavList";
13:16:28.342 | \|                         ^
13:16:28.342 | 9 \|
13:16:28.342 | 10 \| type FooterBodyProps = {
13:16:28.342 | 11 \|   nav: FooterNavListProps[];
13:16:28.424 | error Command failed with exit code 1.
13:16:28.425 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
13:16:28.444 | Error: Command "yarn run build" exited with 1
```

One solution possible is to put `strict` to `false` in `tsconfig.json`, but I think this is a bad idea.

Here is my `package.json` : 
```json
{
  "scripts": {
    "prepare": "panda codegen",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@fontsource/space-grotesk": "^5.0.13",
    "@fontsource/space-mono": "^5.0.15",
    "@pandacss/dev": "^0.15.5",
    "@splidejs/react-splide": "^0.7.12",
    "@splidejs/splide": "^4.1.4",
    "@splidejs/splide-extension-auto-scroll": "^0.5.3",
    "@types/animejs": "^3.1.8",
    "animejs": "^3.2.1",
    "dlv": "^1.1.3",
    "next": "13.5.4",
    "next-intl": "3.0.0-beta.19",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "7.4.6",
    "@storybook/addon-interactions": "7.4.6",
    "@storybook/addon-links": "7.4.6",
    "@storybook/addon-onboarding": "1.0.8",
    "@storybook/blocks": "7.4.6",
    "@storybook/nextjs": "7.4.6",
    "@storybook/react": "7.4.6",
    "@storybook/testing-library": "0.2.2",
    "@types/dlv": "^1.1.3",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "13.5.4",
    "eslint-plugin-storybook": "^0.6.15",
    "storybook": "7.4.6",
    "typescript": "^5"
  }
}
```

And the code of my component : 
```js
"use client";

import { Splide, SplideTrack } from "@splidejs/react-splide";
import "@splidejs/react-splide/css";
import { Testimonial } from "../../../types";
import TestimonialsCarouselItem from "./Item";
import TestimonialsCarouselNav from "./Nav";
import { bluredCirclesStyle, splideStyle } from "../styles";

type TestimonialsCarouselProps = {
  testimonials: Testimonial[];
  light?: boolean;
};

const TestimonialsCarousel: React.FC<TestimonialsCarouselProps> = ({
  testimonials,
  light = false,
}) => {
  return (
    <Splide
      hasTrack={false}
      options={{
        type: "loop",
        pagination: false,
        rewind: true,
        perPage: 2,
        perMove: 1,
        padding: { right: "15rem" },
        width: "70%",
        gap: "15px",
        breakpoints: {
          767: {
            width: "100%",
            perPage: 2,
            padding: { right: "5rem" },
          },
          1000: {
            perPage: 1,
            padding: { right: "4rem" },
          },
          1200: {
            padding: { right: "8rem" },
          },
        },
      }}
      aria-label="My Favorite Images"
      className={splideStyle}
    >
      <SplideTrack>
        {testimonials.map((testimonial, i) => (
          <TestimonialsCarouselItem
            {...testimonial}
            key={`testimonial-${i}`}
            light={light}
          />
        ))}
      </SplideTrack>

      <TestimonialsCarouselNav light={light} />
    </Splide>
  );
};

export default TestimonialsCarousel;
```

I created a new repo to see if it's working, but it's not 
https://github.com/Lauwed/test-splide-ts-error
I also tried from scratch without Storybook. So it should not be the problem.

### Reproduction Link

https://codesandbox.io/p/github/Lauwed/test-splide-ts-error/main?file=%2FREADME.md&workspaceId=9a62f4c3-29d3-4468-bb9a-f4c1f6b8680f

### Steps to Reproduce

1. Create a NextJS Typescript project
2. Add and setup Storybook to the project using `npx storybook@latest init` and following those instructions : https://storybook.js.org/recipes/next
3. Remove custom import of Next from `tsconfig.json` (For required to use Storybook)
```json
// Remove it
"paths": {
      "@/*": ["./*"]
    }
```
4. Install Splide
```
yarn add @splidejs/splide
yarn add @splidejs/react-splide
```
5. Create the component and you will have an error on Splide import.

### Expected Behaviour

Should not have the Typescript error when importing SplideJS

Could not find a declaration file for module '@splidejs/react-splide'

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.1.4

### Description

Attribute "disabled" is not added to the arrow buttons when start or end is reached.


### Reproduction Link

_No response_

### Steps to Reproduce

Here is my JavaScript code:
```
Splide.defaults = {
    arrowPath: "M12.3 35.0166C13.1167 35.8333 14.4334 35.8333 15.25 35.0166L29.1 21.1666C29.2545 21.0124 29.3771 20.8293 29.4607 20.6277C29.5444 20.426 29.5874 20.2099 29.5874 19.9916C29.5874 19.7733 29.5444 19.5572 29.4607 19.3556C29.3771 19.154 29.2545 18.9708 29.1 18.8166L15.25 4.96663C14.4334 4.14996 13.1167 4.14996 12.3 4.96663C11.4834 5.78329 11.4834 7.09996 12.3 7.91663L24.3667 20L12.2834 32.0833C11.4834 32.8833 11.4834 34.2166 12.3 35.0166Z",
    lazyLoad: "nearby",
    preloadPages: 2
}

const sliders = document.querySelectorAll("[data-slider]");
    sliders.forEach(slider => {
        new Splide(slider).mount();
    });
```
Here is my HTML code:
```
     <div data-slider class="splide u-mb-2" role="group" aria-label="Something">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <div class="slider-page">
                            <img data-splide-lazy="../static/img/img1.png" alt="Image" class="slider-page__image">
                            <div class="slider-page__description">
                                <p class="paragraph">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </div>
                    </li>
                    <li class="splide__slide">
                        <div class="slider-page">
                            <img data-splide-lazy="../static/img/img1.png" alt="Image" class="slider-page__image">
                            <div class="slider-page__description">
                                <p class="paragraph">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
```

### Expected Behaviour

Attribute "disabled" should be added to the arrow buttons when start or end is reached.

Attribute "disabled" is not added to the arrow buttons when start or end is reached

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

j

### Description

Excuse me I read your documentation, for integrated with Vue JS 3, but your demo doesn't work, could you help me?

### Reproduction Link

j

### Steps to Reproduce

j<template>
    <section id="thumbnail-carousel" class="splide"
        aria-label="The carousel with thumbnails. Selecting a thumbnail will change the Beautiful Gallery carousel.">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide">
            <img src="https://th.bing.com/th/id/OIP.PA_USRL68UjTfF0kRo5ImQHaEo?rs=1&pid=ImgDetMain" alt="">
          </li>
          <li class="splide__slide">
            <img src="https://th.bing.com/th/id/OIP.PA_USRL68UjTfF0kRo5ImQHaEo?rs=1&pid=ImgDetMain" alt="">
          </li>
          <li class="splide__slide">
            <img src="https://th.bing.com/th/id/OIP.PA_USRL68UjTfF0kRo5ImQHaEo?rs=1&pid=ImgDetMain" alt="">
          </li>
        </ul>
      </div>
    </section>
  </template>
  
  <script setup>
  import { defineComponent } from 'vue';
  import { Splide, SplideSlide } from '@splidejs/vue-splide';
  
  defineComponent({
    components: {
      Splide,
      SplideSlide,
    },
  });
  </script>
  
  <style scoped>
  .splide__slide img {
    width: 100%;
    height: auto;
  }

  /* // Default theme */
@import '@splidejs/vue-splide/css';


/* // or other themes */
@import '@splidejs/vue-splide/css/skyblue';
@import '@splidejs/vue-splide/css/sea-green';


/* // or only core styles */
@import '@splidejs/vue-splide/css/core';
  </style>

### Expected Behaviour

[README.md](https://github.com/Splidejs/splide/files/14786882/README.md)


not working

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.1.3

### Description

Contrary to the standard a11y rules and guidelines, 
The active pagination item is focusable, while the other pagination items are non-focusable (tabindex="-1').

The idea is, that if a pagination item is accessible via a mouseclick, then it should also be accessible via TAB press. 

### Reproduction Link

_No response_

### Steps to Reproduce

1. Hit TAB as much as needed, until reaching the pagination area.

### Expected Behaviour

Every pagination item which is not active (i.e. , which corresponds to a slide which is not visible at the moment), should be focusable, and not have a tabindex="-1" value. 

The active pagination item SHOULD be non-focusable (i.e., have a tabindex="-1" value), although not mandatory. 

Inactive pagination items are not accessible via TAB key

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.1.3

### Description

Splide has an option to "destory" the slider on a certain breakpoint. This works fairly well, but it introduces an accessibility issue. When the slides contain links, they are no longer focusable, since Splide sets a `tabindex="-1"` on every "inactive slide". Since in the "destroy" state, all slides are visible and therefore "active", this `tabindex="-1"` and other accessibility properties should be removed  (e.g. `aria-hidden="true"` does get removed correctly) .

### Reproduction Link

https://codepen.io/2ndkauboy/pen/VwOvWpG

### Steps to Reproduce

1. Create a slider with links inside the slides.
2. Set the option to destroy the slider at a certain breakpoint.
3. Test keyboard navigation of links inside the slides.

### Expected Behaviour

Links (and other focusable elements) inside the slider should be focusable when "destroyed".

pauseOnFocus / pauseOnHover does not work

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

4.1.3

### Description

If you wrap your images in a tags then a lot of the features no longer work - such as 'gap and 'cover'.  Here is an example structure that shows the issue : 

html : 

```
<section id="image-carousel" class="splide" aria-label="Beautiful Images">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<a class="test" href="#"><img src="image01.jpg" alt=""></a>
			</li>
		</ul>
  </div>
</section>
```

js : 

```
var splide = new Splide( '#image-carousel', {
	type   : 'slide',
	pagination:false,
	height: 150,
	gap: '1rem',
	cover: true,
	perPage: 3,
}).mount();
```

In my specific case I need to wrap my images in a tags for use with another plugin for display, but I can think of tons of other reasons someone might want to do this.

My only guess here is somewhere in your code, maybe for these options specifically, it looks for img tags are direct children rather than being wrapped?  It would seem an easy solution here would be to create a specific splide class for img tags.

### Reproduction Link

_No response_

### Steps to Reproduce

see above

### Expected Behaviour

I expect everything should still work properly even if I wrap my img tags with a tags.

Can't wrap images in a tag

### Checks

- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4

### Description

![image](https://github.com/user-attachments/assets/372436d2-7cbb-47fc-8e47-f367a96c8716)

When using the structure as below it is showing a small right side wrong calculation of transformation how to fix it ?

<div class="container mt-100">
    <section class="splide" aria-label="Splide Carousel">
        <div class="splide__track">
            <ul class="splide__list">
                <?php
                $stmt = $con->query("SELECT * FROM gallery");
                while ($res = $stmt->fetch(PDO::FETCH_OBJ)):
                ?>
                    <li class="splide__slide"><img src="admin/images/gallery/<?= $res->image ?>" alt=""></li>
                <?php
                endwhile;
                ?>
            </ul>
        </div>
    </section>
</div>

<style>
    .splide__slide {
        opacity: 0.7;
        padding-block: 2rem;
    }
    .splide__slide.is-active {
        scale: 1.1;
        opacity:1;
        z-index: 1;
        transition: all 0.3s ease;
        padding-block: 2rem;
    }
</style>

### Reproduction Link

https://wedmedia.co.in/index

### Steps to Reproduce

1. Just need to use scale css on the centered element

### Expected Behaviour

When clicking on left nav it is able to calculate the transform x perfectly but when clicking on right nav it is unable to calculate due to the scale property.

When scale up it's showing a little right glitch when click on next

### Checks

- [x] Not a duplicate.
- [x] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.1.3

### Description

We have Carousel with multiple items a page (splide splide--loop splide--ltr splide--draggable is-active is-initialized) and you drag the carousel a bit faster to the left and right and to the left and the right, then Chrome Dev Tools -  Console says:
_Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: a
Ancestor with aria-hidden:  <div class=​"splide__slide splide__slide--clone" id=​"image-carousel-clone05" role=​"tabpanel" aria-roledescription=​"slide" aria-label=​"2 of 3" style=​"margin-right:​ 35px;​" aria-hidden=​"true">​…​</div>​_

Does anyone else has this problem? Thank you!

### Reproduction Link

_No response_

### Steps to Reproduce

Discribed at the description section...

### Expected Behaviour

No error messages in console

Blocked aria-hidden on an element because its descendant retained focus

### Checks

- [x] Not a duplicate.
- [x] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.1.4

### Description

Our project that utilizes Splide underwent a thorough web accessibility audit conducted by specialists from Accens, aiming to meet accessibility standards such as the European Accessibility Act (EAA) guidelines.

During this audit, the auditors highlighted that the `aria-orientation="vertical"` attribute on the `splide__list` element is incompatible when used with `role="presentation"`.

### Reproduction Link

_No response_

### Steps to Reproduce

1. Create a carousel with `direction: 'ttb'` option in the configuration.
2. The `splide__list` element will have the `aria-orientation="vertical"` attribute on it.

### Expected Behaviour

The accessibility professionals at Accens recommend removing the `aria-orientation="vertical"` attribute in this specific context. They noted that this attribute is reportedly unsupported when paired with `role="presentation"` on the same element, and its removal in such cases does not appear to introduce further accessibility issues.


Incorrect aria-orientation="vertical" attribute - Findings from a professional audit

### Checks

- [x] Not a duplicate.
- [x] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.0.7

### Description

The mac VoiceOver screen reader reads the less useful "1 of 5" aria label instead of the actual text content of the slide. Right now I did:

```js
    this.splide.on('mounted', () => {
      this.splide.Components.Slides.forEach((slide) => {
        // remove aria-label so that the actual content is used instead of splides default "1 of 5" etc.
        slide.slide.removeAttribute('aria-label');
      });
    });
```

to remove `aria-label` attribute. It would be nice if there was an option to make splide not add them. Or maybe dont add them by default and have an option to have splide add them?

### Reproduction Link

_No response_

### Steps to Reproduce

1. make a splide slideshow with defaults options
2. notice how every slide element has the aria-label.

### Expected Behaviour

To have a way to make splide not add `aria-label` attributes.

Stop default "1 of 5" etc. aria-label being added for slide elements

### Checks

- [x] Not a duplicate.
- [x] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

### Version

v4.1.3

### Description

When I was developing a carousel plug-in using splide on Shopify, I found that I couldn't use touch to slide horizontally on the mobile side. I could only switch between them using the left and right switch buttons and automatic carousel.
If I keep swiping horizontally, sometimes it works by touch swiping, but not every time.

### Reproduction Link

_No response_

### Steps to Reproduce

1.Create a component file
2.Below is the code from the file：
<div class="brand-swiper-contair" style="background-color:{{ bg_color }};">
    <div class="{{section.id}}-brand-swiper-content">
        {%- if title_text != blank -%}
        <{{heading_tag }} class="{{section.id}}-brand-swiper-title page-width">{{ title_text | escape }}</{{ heading_tag }}>
        {%- endif -%}
        <div class="brand-swiper-wrapper-splide">
            {%- if section.blocks.size > 0 -%}
                <div class="splide brand-swiper-blocks page-width" id="{{ section.id }}Splide" role="region" aria-roledescription="carousel">
                    <div class="splide__track brand-swiper-blocks-content">
                        <ul class="splide__list brand-swiper-blocks-items">
                            {%- for block in section.blocks -%}
                                {% assign index = forloop.index %}
                                <li class="splide__slide">
                                    {%- if block.settings.link != blank -%}
                                        <a
                                        href="{{ block.settings.link }}"
                                        class="brand-swiper-item cursor"
                                        aria-label="Brand"
                                        >
                                    {%- else -%}
                                        <div class="brand-swiper-item">
                                    {%- endif -%}
                                            <div class="brand-swiper-item-img">
                                                {% if block.settings.brand_img_pc != blank %}
                                                    {% if block.settings.brand_img_mobile != blank %}
                                                        <img src="{{ block.settings.brand_img_mobile | img_url:"master" }}" class="is-mobile" alt="brand" loading="lazy" width="100%" height="100%">
                                                    {% endif %}
                                                        <img src="{{ block.settings.brand_img_pc | img_url:"master" }}" class="{% if block.settings.brand_img_mobile != blank %}is-pc{% endif %}" alt="brand" loading="lazy" width="100%" height="100%">
                                                {% else %}
                                                    {%- render 'placeholder-svg', name: 'lifestyle-1' -%}
                                                {% endif %}
                                            </div>
                                            {% if block.settings.brand_title_pc != blank or block.settings.brand_subtitle_pc != blank %}
                                            <div class="brand-swiper-item-mask"></div>
                                            <div class="brand-swiper-item-text">
                                                {% if block.settings.brand_title_pc != blank %}
                                                    {% if block.settings.brand_title_mobile != blank %}
                                                    <div class="brand-swiper-item-title is-mobile" style="color:{{ block.settings.text_color }};font-weight:{{ block.settings.title_font_weight }};text-align:{{ text_align }};">{{ block.settings.brand_title_mobile }}</div>
                                                    {% endif %}
                                                    <div class="brand-swiper-item-title {% if block.settings.brand_title_mobile != blank %}is-pc{% endif %}" style="color:{{ block.settings.text_color }};font-weight:{{ block.settings.title_font_weight }};text-align:{{ text_align }};">{{ block.settings.brand_title_pc }}</div>
                                                {% endif %}
                                                {% if block.settings.brand_subtitle_pc != blank %}
                                                    {% if block.settings.brand_subtitle_mobile != blank %}
                                                    <div class="brand-swiper-item-subtitle is-mobile" style="color:{{ block.settings.text_color }};text-align:{{ text_align }};">{{ block.settings.brand_subtitle_mobile }}</div>
                                                    {% endif %}
                                                    <div class="brand-swiper-item-subtitle {% if block.settings.brand_subtitle_mobile != blank %}is-pc{% endif %}" style="color:{{ block.settings.text_color }};text-align:{{ text_align }};">{{ block.settings.brand_subtitle_pc }}</div>
                                                {% endif %}
                                            </div>
                                            {% endif %}
                                    {%- if block.settings.link != blank -%}
                                        </a>
                                    {%- else -%}
                                        </div>
                                    {%- endif -%}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="arrow-left" id="{{ section.id }}ArrowLeft">
                    {% if arrow_left_img != blank %}
                    <img src="{{ arrow_left_img | img_url:"master" }}" width="100%" height="16px" alt="Left">
                    {% else %}
                        <svg t="1760941156899" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4536" width="32" height="32"><path d="M700.269 930.666c-14.331 0-27.677-5.512-37.657-15.529l-365.34-365.99c-1.337-1.306-2.38-2.417-3.234-3.607l-2.16-2.723c-10.653-10.703-15.888-23.296-15.888-36.627 0-13.571 5.351-26.26 15.053-35.73l367.853-363.953c9.951-9.813 23.238-15.222 37.401-15.222 13.848 0 26.931 5.25 36.832 14.769 9.841 9.549 15.507 22.867 15.506 36.518 0 13.484-5.365 26.259-15.134 35.969l-331.846 328.283 336.081 336.964c9.607 9.666 14.915 22.296 14.915 35.619 0 13.958-5.673 27.055-15.937 36.876-9.768 9.271-22.734 14.381-36.444 14.381z" fill="#ffffff" p-id="4537"></path></svg>
                    {% endif %}
                </div>
                <div class="arrow-right" id="{{ section.id }}ArrowRight">
                    {% if arrow_right_img != blank %}
                    <img src="{{ arrow_right_img | img_url:"master" }}" width="100%" height="16px" alt="Left">
                    {% else %}
                        <svg t="1760941335880" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" width="32" height="32"><path d="M323.731 93.334c14.331 0 27.677 5.512 37.657 15.529l365.34 365.99c1.337 1.306 2.38 2.417 3.234 3.607l2.16 2.723c10.653 10.703 15.888 23.296 15.888 36.627 0 13.571-5.351 26.26-15.053 35.73l-367.853 363.953c-9.951 9.813-23.238 15.222-37.401 15.222-13.848 0-26.931-5.25-36.832-14.769-9.841-9.549-15.507-22.867-15.506-36.518 0-13.484 5.365-26.259 15.134-35.969l331.846-328.283-336.081-336.964c-9.607-9.666-14.915-22.296-14.915-35.619 0-13.958 5.673-27.055 15.937-36.876 9.768-9.271 22.734-14.381 36.444-14.381z" fill="#ffffff" p-id="1692"></path></svg>
                    {% endif %}
                </div>
            {%- endif -%}
        </div>
        {%- if section.blocks.size > 0 -%}
            <div class="brand-point-list">
                {%- for block in section.blocks -%}
                    <div class="{{ section.id }}-brand-point">
                        <div class="brand-point-progress {{ section.id }}-point-progress"></div>
                        <div class="brand-point-hot-spot"></div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</div>
<script>
  document.addEventListener( 'DOMContentLoaded', function() {
    let splideOptions = {
        type:'loop',
        autoplay: true,
        autoWidth:true,
        autoHeight:true,
        arrows:false,
        pagination:false,
        pauseOnHover:false,
        cover: true,
        dragMinThreshold: {
            mouse: 1,
            touch: 5,
        },
        flickPower: 500,
        interval: {{ interval_time | times: 1000 }},
        drag: true,
        gap: '24px',
		breakpoints: {
			768: {  
                gap: '16px',
            },
		},
    }
    const splide = new Splide( '#{{ section.id }}Splide',splideOptions );
    $('#{{ section.id }}ArrowLeft').on('click',function(){
        splide.go('-1')
    });
    $('#{{ section.id }}ArrowRight').on('click',function(){
        splide.go('+1')
    });
    $('.{{ section.id }}-brand-point .brand-point-hot-spot').on('click',function(){
        const index = $('.{{ section.id }}-brand-point .brand-point-hot-spot').index(this);
        splide.go(`>${index}`)
    });
    splide.on( 'mounted', function () {
        $('.{{ section.id }}-brand-point').removeClass('active');
        $('.{{ section.id }}-brand-point').eq(0).addClass('active');
    } );
    splide.on( 'autoplay:playing', function ( rate ) {
        let progressNum = rate*100;
        $('.{{ section.id }}-brand-point.active').find('.{{ section.id }}-point-progress').css('width',progressNum+'%');
    } );
    splide.on( 'move', function (newIndex) {
        $('.{{ section.id }}-brand-point').removeClass('active');
        $('.{{ section.id }}-brand-point').eq(newIndex).addClass('active');
    } );
    splide.mount();
  });
</script>
3.查看添加的视频

https://github.com/user-attachments/assets/111bc538-cfa4-443a-9e1c-05866b44acc2

文件

### Expected Behaviour

Solve the problem that the v4 version cannot be switched horizontally on the mobile side in Shopify development

@splidejs/splide

52 GitHub issues

Open issues

Links