javascript - How to maintain the selected state of radio button in slick slides as you navigate between slides - Stack Overflow

admin管理员组

文章数量:1402122

Steps to do.

1. Select the radio button item 1.
2. Click the slick next arrow until you reach again the item 1 and it is not selected. I want it selected because you select it previously.

I want to maintain the selected state of radio button in slick slides once it shown in the slick/viewport.

I tried using the slick Methods and Events like slickGoTo, afterChange ect.. but no to avail.

Here are my codes.

$('.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,
        });
    });

.items {
  width: 380px;
}

<link href=".0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href=".9.0/slick.min.css" rel="stylesheet"/>
<link href=".9.0/slick-theme.min.css" rel="stylesheet"/>
<script src=".6.3.min.js"></script>
<script src=".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">Maintain the selected radio button on slick slide and maintain the selected state as you navigate between slides.</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>

Steps to do.

1. Select the radio button item 1.
2. Click the slick next arrow until you reach again the item 1 and it is not selected. I want it selected because you select it previously.

I want to maintain the selected state of radio button in slick slides once it shown in the slick/viewport.

I tried using the slick Methods and Events like slickGoTo, afterChange ect.. but no to avail.

Here are my codes.

$('.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,
        });
    });

.items {
  width: 380px;
}

<link href="https://cdnjs.cloudflare/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<script src="https://code.jquery/jquery-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare/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">Maintain the selected radio button on slick slide and maintain the selected state as you navigate between slides.</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>

• javascript
• jquery
• carousel
• slick.js

Share Improve this question Follow edited Mar 24 at 6:58 clarkf asked Mar 22 at 4:01 clarkfclarkf 71333 gold badges1414 silver badges2828 bronze badges 1

• If you use your browser devtools inspect facility you will see that there is more than one instance of each radio button - this is a fairly standard way of maintaining smooth movement in a carousel. This structure won't let you have the items as a set of radio buttons as only one can be selected at once. You'll need to use e.g. checkboxes and implement some JS which runs through them when the state of one changes to keep its clones in step. – A Haworth Commented Mar 22 at 5:30

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can listen to the slide change event afterChange and set :checked on the cloned slide:

$('.my-slick-carousel').each(function () {
  let slider = $(this);
  slider.slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    autoplay: false,
    dots: true,
    infinite: true,
    arrows: true,
    centerPadding: '0px',
    variableWidth: true,
    centerMode: false,
    touchThreshold: 100,
    rows: 0,
  });
});

$(document).on('change', '.my-slick-carousel [type="radio"]', function () {
  const t = $(this);
  t.closest('.my-slick-carousel').data('value', t.val());
});

$('.my-slick-carousel').on('afterChange', function () {
  const t = $(this);
  const checkedInput = t.find('[type="radio"]:checked');
  if (!checkedInput.length) {
    return;
  }
  const value = t.data('value');
  let isActive = false;
  t.find('.slick-slide').each(function () {
    const slide = $(this);
    if (slide.hasClass('slick-active')) {
      isActive = true;
    }
    if (!isActive) {
      return;
    }
    checkedInput.prop('checked', false);
    const input = slide.find('[type="radio"]');
    if (input.val() === value) {
      input.prop('checked', true);
      return false;
    }
  });
});

<link href="https://cdnjs.cloudflare/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<script src="https://code.jquery/jquery-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare/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;
}
.items {
  width: 380px;
}
</style>

<div class="container">
  <h4 class="text-center">Maintain the selected radio button on slick slide and maintain the selected state as you navigate between slides.</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>

本文标签：