Slick: When slider items are radio buttons, not working as expected

[carlesjove]

Here's a JSFiddle of the issue.

When a slider item is a radio button, some unexpected things happen. Assuming this markup:

<section class="slider">
    <div><input type="radio" checked="checked" name="option" />slide1</div>
    <div><input type="radio" name="option" />slide2</div>
    <div><input type="radio" name="option" />slide3</div>
    <div><input type="radio" name="option" />slide4</div>
    <div><input type="radio" name="option" />slide5</div>
    <div><input type="radio" name="option" />slide6</div>
</section>

<script>
$(".slider").slick({
    autoplay: false,
    dots: false,
    slidesToShow: 3,
    slidesToScroll: 1
});
</script>

• On load, the first item won't be checked
• After clicking "next" a bunch of times, slide1 appears checked, but as soon as it reaches index 1, goes unchecked again
• However, when input has no name (name="") everything works as expected

[simeydotme]

This is all clearly issues with cloned slides... I think you're probably not going to ever get what you want with this kind slider :confused: ... you could always try writing your own simple slider since your use-case seems quite simple (few options, no responsive) :smile:

Si.

[kenwheeler]

Or use infinite: false

[carlesjove]

@kenwheeler Yes! infinite: false solved the issue. I guess I can live without this being an infinite loop. Thank you.

[carlesjove]

Thank you too @simeydotme , by the way :-)