JQuery 缩放代码不适用于光滑的滑块

如何解决JQuery 缩放代码不适用于光滑的滑块

应用 jQuery 缩放代码后

1. 页面滑块停止

2. 滑块无法正常工作 → 显示与以前不同的产品图片

   {% style %}
   
    body{
      background:#ccc;
    }
   
   
   
    }
    .main-image {
        background: #fff;
        color: #3498db;
        font-size: 36px;
        line-height: 100px;
        margin: 10px;
        padding: 2%;
        position: relative;
        text-align: center;
    }
   
   
   
   
    .container {
      width: 500px;
      position: relative;
    }
   
    .header {
      clear: both;
      margin-bottom: 10px;
      border: 1px solid #000000;
      height: 90px;
    }
   
    .sidebar {
      float: left;
      width: 300px;
      border: 1px solid #000000;
    }
   
    .content {
      float: right;
      width: 640px;
      border: 1px solid #000000;
      height: 800px;
    }
   
    .footer {
      clear: both;
      margin-top: 10px;
      border: 1px solid #000000;
      height: 820px;
    }
   
   
    body {
      position:relative;
        overflow: hidden;
      margin:0;
      padding:0;
    }
    .background{
        position: absolute;
        top: 0;
        left: 0;
        width: 30vw;
        height: 30vh;
        background-size: cover;
        background-repeat: no-repeat;
        filter: blur(4px);
        transform: scale(1.1);
    }
    .zoom-container {
        position: relative;
        z-index: 2;
    }
    .zoom {
        background-image: url("https://burst.shopifycdn.com/photos/[e-mail]");
        background-repeat: no-repeat;
        width: 1024px;
        overflow: hidden;
        cursor: zoom-in;
        margin: auto;
        filter: none !important;
    }
   
    img {
        transition: opacity .5s;
        display: block;
        width: 100%;
    }
    img:hover {
        opacity: 0;
    }
    .zoom:hover p {
      opacity:0.2; 
    }
   
    .slick-slider{
        touch-action: auto!important;
    }
   
   
    {% endstyle %}
   
   
   
   
   
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
   
    <div class="container">
   
        <div class="header">
            This is header
          </div>
   
   
          <div class="sidebar sticky">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
          </div>
   
          <div class="content">
   
   
   
              <form style="margin-bottom: 100px;" method="post" action="/cart/add" >
                  <div class="main">
   
                  <div class=”image-container”>      
                <div  class="slider slider-for">
   
   
   
                  <div class="background"></div>
   
   
                {% for media in product.media %} 
   
   
   
           <div class="zoom-container">
              <div class="zoom">
                 <img class=”image-zoom”  src="{{ media.preview_image | img_url : '2000x' }}"  style="width:100%; height: 450px; ">
              </div>
           </div>
                 {% endfor %}
   
   
   
        <div class="image-details"></div>
   
              </div>
              </div>
   
                <div  class="slider slider-nav">
                    {% for media in product.media %}
                <img style="margin:5px; height:150px;" src="{{ media.preview_image | img_url : '2000x' }}" style="width:50%">
                   {% endfor %}
   
                </div>
   
   
              <h1>{{ product.title }}</h1>
              <p>{{ product.description }}</p>
              <h2>{{ product.price | money_with_currency }}</h2>
   
   
   
   
   
              <div class="variant-swatches">
   
   
              {% for option in product.options_with_values %}
   
              {% assign index = forloop.index %}
              <label style="font-size: 30px;">{{ option.name }}</label>
   
                {% for value in option.values %}
   
                <label class="color_name"  name="id" for="color-{{ forloop.index }}" style="height:30px; width:65px; display: inline-block; color: {{ value }}; background-color: {{ value }};">{{ value }}</label>
   
                  {% endfor %}
                {% endfor %}
              <br>
   
                 {% for variant in product.variants %}
                 <input style="margin: 5px 25px 20px 30px;"  class="single-option-selector-{{ section.id }}" id="color-{{ forloop.index }}" type="radio" name="id"
                               value="{{ variant.id }}" data-index="option{{ index }}" /> 
                {% endfor %}
   
                </div> 
   
              <div id="quantity-selector">
                  <button style="width: 50px; height: 30px;" type="button" id="sub" class="sub">-</button>
                  <input style="width: 100px; height: 50px; font-size: large;" type="number" name="quantity" placeholder="1" id="quant" value={{ 'product.quantity' | t }} min="1" max="10" />
                  <button style="width: 50px; height: 30px;" type="button" id="add" class="add">+</button>
              </div> 
                <button  id="add_to_cart" type="submit" value="submit" data-add-to-cart style="margin-top: 10px; margin-botom:80px; font-size:20px; width: 130px; height: 50px; color: white; background: black;">Add to Cart</button> 
   
   
                </div>
   
             </form>        
   
      </div>
   
   
      {% if collection %}
      <div class="text-center return-link-wrapper page-width">
        <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
          {% include 'icon-arrow-left' %}
          {{ 'products.product.back_to_collection' | t: title: collection.title }}
        </a>
      </div>
    {% endif %}
   
   
        <div class="footer">
        <div class="sticky-stopper"></div>
        This is my footer
      </div>
   
   
    </div>
    </div>