Css clicked with a red border on the image clicked, but when it was moved to a slider, the same order as the first image displayed even when the slide image was clicked A red frame has been added to the image.
If there is a way to add a red border to the clicked image even if it is a slider, it would be helpful if you could teach me.

<p>Please select a color<span></span></p>
    
      
      <input type = "radio" name = "check-color" value = "1" />
      <label for = "check-color1"></label>
    
    
      <input type = "radio" name = "check-color" value = "2" />
      <label for = "check-color2"></label>
    
    
      <input type = "radio" name = "check-color" value = "3" />
      <label for = "check-color3"></label>
    
    
      <input type = "radio" name = "check-color" value = "4" />
      <label for = "check-color4"></label>
    
    
    <input type = "radio" name = "check-color" value = "1" />
    <label for = "check-color1"></label>
  
  
    <input type = "radio" name = "check-color" value = "2" />
    <label for = "check-color2"></label>
  
  
    <input type = "radio" name = "check-color" value = "3" />
    <label for = "check-color3"></label>
  
  
    <input type = "radio" name = "check-color" value = "4" />
    <label for = "check-color4"></label>
  
  
    <input type = "radio" name = "check-color" value = "3" />
    <label for = "check-color3"></label>
  
  
    <input type = "radio" name = "check-color" value = "4" />
    <label for = "check-color4"></label>
  
    

.color-title {
    border-top: solid 1px # B3B3B3;
    padding-top: 20px;
  }.color {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .check-color-item {
    height: auto;
  }
  .check-color-item img {
    vertical-align: bottom;
    width: 100%;
  }
  input [type = "radio"] {
    display: none;
  }
  input [type = "radio"] + .check-color-item img {
    position: relative;
    width: 72px;
    height: 86px;
    text-align: center;
    display: flex;
    padding: 2px;
  }
  input [type = "radio"]: checked + .check-color-item img {
    border: solid 2px red;
    padding: 0;
  }

$(function () {
  $('. slider2'). slick ({
    infinite: false,
    dots: true,
    arrows: false,
    slidesToShow: 4,
    slidesToScroll: 4
});
});

I tried it, but I tried to add the image-border-ck class so that it can be turned on and off with a click event.

<p>Please select a color<span></span></p>
    
      
      <input type = "radio" name = "check-color" value = "1" />
      <label for = "check-color1"></label>
    
    
      <input type = "radio" name = "check-color" value = "2" />
      <label for = "check-color2"></label>
    
    
      <input type = "radio" name = "check-color" value = "3" /><label for = "check-color3"></label>
    
    
      <input type = "radio" name = "check-color" value = "4" />
      <label for = "check-color4"></label>
    
    
    <input type = "radio" name = "check-color" value = "1" />
    <label for = "check-color1"></label>
  
  
    <input type = "radio" name = "check-color" value = "2" />
    <label for = "check-color2"></label>
  
  
    <input type = "radio" name = "check-color" value = "3" />
    <label for = "check-color3"></label>
  
  
    <input type = "radio" name = "check-color" value = "4" />
    <label for = "check-color4"></label>
  
  
    <input type = "radio" name = "check-color" value = "3" />
    <label for = "check-color3"></label>
  
  
    <input type = "radio" name = "check-color" value = "4" />
    <label for = "check-color4"></label>
  
    

. image-border img {
    position: relative;
    width: 72px;
    height: 86px;
    text-align: center;
    display: flex;
    padding: 2px;
  }
  .image-border-ck img {
    border: solid 2px red;
    padding: 0;
  }

$(function () {
$('. image-border'). on ('click', function () {
$('. image-border'). removeClass ('image-border-ck');
$(this) .addClass ('image-border-ck');
});
});