Splidejs / splide

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
https://splidejs.com
MIT License
4.89k stars 424 forks source link

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

Open Jirkasa opened 12 months ago

Jirkasa commented 12 months ago

Checks

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.