add image slider change variant

product-variant-options.liquid  
dòng 80
{%- elsif picker_type == 'button' -%}
    {%- assign variant = product.variants | where: "title", value | first -%} 
    {% if variant.featured_image %}<div class="custom-variants-image-block">{% endif %}
      <input
        type="radio"
        id="{{ input_id }}"
        name="{{ input_name | escape }}"
        value="{{ value | escape }}"
        form="{{ product_form_id }}"
        {% if value.selected %}
          checked
        {% endif %}
        {% if option_disabled %}
          class="disabled"
        {% endif %}
        {{ input_dataset }} {% if variant.featured_image %}  data-full-img="{{ variant.featured_image.src | img_url: 'master' }}" {% endif %}
      >

      <label
        for="{{ input_id }}"  data-variant-id="{{ variant.id }} "
        class="variant-label {% if variant.featured_image %}image-custom-attr{% endif %}"
        data-full-img="{{ variant.featured_image.src | img_url: 'master' }}"
      >
        <span class="variant-title">{{ value }}</span>
        {{ label_unavailable }}

        {% if variant and variant.featured_image %}
          <img
            src="{{ variant.featured_image.src | img_url: 'master' }}"
            alt="{{ variant.title }}"
            class="variant-thumbnail"
          >
        {% endif %}
      </label>
product-info.js

dòng 20

 /* --- before Custom --- */
        initVariantSlider() {
          const container = document.querySelector('.variant-featured_image-custom');
          if (!container) return;

          const items = container.querySelectorAll('.custom-variants-image-block');
          if (items.length <= 3) {
            return;
          }

          if (container.flickityInstance) {
            container.flickityInstance.destroy();
          }

          container.flickityInstance = new Flickity(container, {
            cellAlign: 'left',
            contain: true,
            pageDots: false,
            groupCells: true,
            wrapAround: true,
            prevNextButtons: true
          });

        }
        /* --- End Custom --- */

dòng 56 
 this.initVariantSlider();
dòng 124
 handleSwapProduct(productUrl, updateFullPage) {} 
        /* --- Custom  variant --- */
          this.initVariantSlider();
          /* --- Custom  variant --- */
dòng 212

   handleUpdateProductInfo(productUrl) {}
this.initVariantSlider();
 css 

/*** CUSTOM ATTR ***/
.custom-variants-image-block {
    width: 25%;
    max-width: 25%;
}

.variant-featured_image-custom div#variant-image-preview img {
    width:  100%;
}
legend.form__label.form__label-text {
    font-size: 1rem;
}
.variant-featured_image-custom legend.form__label {
    display: none;
}
legend.form__label {
    padding-top: 0.5rem;
    float: left;
    width: 100%;
}
.variant-featured_image-custom {
    padding-left: 1rem;
    padding-right: 1rem;
}
div#variant-image-preview img {
    width: 100%;
    max-height: 26rem;
    object-fit: contain;
}
div#variant-image-preview {
    display: block !important;
}
label.variant-label.image-custom-attr img {
    width: 100%;
}
label.variant-label.image-custom-attr {
    width: 100%;
}

label.variant-label.image-custom-attr .variant-title {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  top: -1.5rem; 
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
}
fieldset.js.product-form__input.product-form__input--pill.variant-featured_image-custom {
    background: #fff;
    margin-bottom: 0 !important;
        padding-top: 1rem;
}
div#variant-image-preview {
    display: block !important;
    background: #fff;
    margin-top: 0 !important;
}

variant-selects {
    margin-bottom: 0 !important;
}
.variant-label {
  position: relative; 
  display: inline-block;
  margin: 0.5rem;
}
label.variant-label.image-custom-attr {
    background: #fff !important;
    border-radius: 0 !important;
    border: none !important;
}
.product-form__input--pill input[type=radio]:checked+label {
    border: 1px solid #E0E0E0 !important;
}
.variant-label:hover .variant-title {
    opacity: 1 !important;
    visibility: visible !important;
} 
/*** CUSTOM ATTR ***/

product-variant-options.liquid

 {%- assign variant = product.variants | where: "title", value | first -%} 
  {% if variant.featured_image %}
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      <script src="{{ 'flickity.pkgd.min.js' | asset_url }}"></script>
{% endif %}