Cómo mantener el estado seleccionado del botón de radio en Slick Slides al navegar entre diapositivas

Cuando trabajamos con carouseles como Slick, es común que necesitemos mantener el estado de los botones de radio seleccionados incluso al navegar entre diferentes diapositivas. Esto puede ser esencial para una mejor experiencia del usuario. Aquí te mostramos cómo lograr esto de manera efectiva.

Pasos a seguir

1. Selecciona el botón de radio elemento 1.
2. Haz clic en la flecha de siguiente en Slick hasta que llegues nuevamente al elemento 1, pero observa que no permanece seleccionado. Queremos que se mantenga seleccionado porque lo seleccionaste previamente.

Es importante mantener el estado seleccionado del botón de radio en las diapositivas de Slick una vez que se muestra en la vista de Slick.

Intenté utilizar métodos y eventos de Slick como slickGoTo y afterChange, pero no tuve éxito.

Aquí están mis códigos

$('.my-slick-carousel').each(function() {
        let slider = $(this);
        slider.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: false,
            dots: true,
            infinite: true,
            arrows: true,
            centerPadding: '0px',
            variableWidth: true,
            centerMode: false,
            touchThreshold: 100,
            rows: 0,
        });
        
        // Mantenemos el estado seleccionado del botón de radio
        slider.on('afterChange', function(event, slick, currentSlide) {
            const selectedValue = $('input[name="addOnsRadio"]:checked').val();
            $('input[name="addOnsRadio"]').each(function() {
                $(this).prop('checked', false);
                if ($(this).val() === selectedValue) {
                    $(this).prop('checked', true);
                }
            });
        });
    });

.items {
  width: 380px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<style>
.items {
  background-color: gray;
  border-radius:2rem;
  text-align:center;
}
.slick-prev,
.slick-next {
  z-index:9;
}
.slick-next:before, .slick-prev:before {
  color: red;
}
.slick-prev {
  left: 0;
}
.slick-next {
  right: 0;
}
</style>

<div class="container">
  <h4 class="text-center">Mantener el botón de radio seleccionado en Slick Slide mientras navegas entre las diapositivas.</h4>
<div class="my-slick-carousel py-5 px-3">
    <div class="items mx-2 p-4"><input type="radio" name="addOnsRadio" value="item 1" id=""> item 1</div>
    <div class="items mx-2 p-4"><input type="radio" name="addOnsRadio" value="item 2" id=""> item 2</div>
    <div class="items mx-2 p-4"><input type="radio" name="addOnsRadio" value="item 3" id=""> item 3</div>
     <div class="items mx-2 p-4"><input type="radio" name="addOnsRadio" value="item 4" id=""> item 4</div>
     <div class="items mx-2 p-4"><input type="radio" name="addOnsRadio" value="item 5" id=""> item 5</div>
  </div>
</div>

Siguiendo estos pasos y utilizando este código, podrás mantener el estado seleccionado de los botones de radio al navegar a través de las diapositivas en Slick. Esto mejora la usabilidad y la experiencia general del usuario en tu sitio web.