search

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

"loop" and checkbox #1260

Open DianaMok opened 10 months ago

DianaMok commented 10 months ago

Checks

Version

v4.1.3

Description

when the loop type is set, it is impossible to make blocks inside the li with an input checkbox, since input selection does not work.

Reproduction Link

No response

Steps to Reproduce

        <div class="splide">
            <div class="splide__track">
                <ul class="splide__list">           
                                          <li class="splide__slide">
                        <input class="total-box__checkbox-input" type="checkbox" id="check-4" name="check-4">
                        <label class="total-box__checkbox" for="check-4">
                            <span class="total-box total-box__box-4">
                                <span class="total-box__title">
                                    text
                                </span>
                                <span class="total-box__check">
                                    <span class="total-box__checkbox-check">
                                    </span>
                                </span>
                            </span>
                        </label>
                    </li>
    </ul>
</div>

Expected Behaviour

input type checkbox must be clickable regardless of the carousel type

Webberjo commented 9 months ago

When the slider is set to loop, Splide creates clones of the slides which means there will be multiple inputs on the page with the same ID. Even if the checkbox was clickable, it would not be valid HTML.