如何在 Shopify 中使这个光滑的滑块响应平板电脑和移动设备？

Question

滑块在桌面视图上看起来不错，但无法正确调整大小。 我只是希望它在平板电脑和移动设备上调整大小以提高响应速度。在主视图中保持静止 3 张图片。我尝试了一些媒体查询，但它们对我不起作用，因为滑块图像/滑块本身保持相同的大小。提前感谢您的帮助！

{% comment %} -------CSS------- {% endcomment %}
<link rel="stylesheet" type="text/css" href="{{ 'slick.css' | asset_url }}"/>

{% comment %} -------HTML------- {% endcomment %}
<div class="spacer" style="height: 80px; width: 100%;">&nbsp;</div>
<div class="custom-text-area">
    <h1 style="font-family: eurostile-extended, sans-serif; font-weight: 500; text-transform: uppercase;">Legacy Edition</h1>
</div>
<div class="carousel-wrap" style="margin-top: 30px; margin-bottom: 30px;">
  <div class="band-accessory-routing_band-accessory-routing__slider--opacity__80oPN" style="display: block !important;"></div>
  <div class="slider center blue">
    <div class="image-x"> 
    <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/purple-1.png?v=1725491685" style="opacity: 1;"></a>
    </div>
    <div class="image-x"> 
    <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/orange-1.png?v=1725491685" style="opacity: 1;"></a>
    </div>
    <div class="image-x">
    <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/pink-1.png?v=1725491685" style="opacity: 1;"></a>
    </div>
    <div class="image-x"> 
    <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/purple-1.png?v=1725491685" style="opacity: 1;"></a>
    </div>
    <div class="image-x">
    <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/orange-1.png?v=1725491685" style="opacity: 1;"></a>
    </div>
    <div class="image-x"> 
    <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/pink-1.png?v=1725491685" style="opacity: 1;"></a>
    </div>
  </div>
</div>


<div class="custom-button-area" style="padding: 30px 0 20px;">
  <a href="/collections/all" class="btn-link">Shop All</a>
</div>
<div class="spacer" style="height: 100px; width: 100%;">&nbsp;</div>

{% comment %} -------JS------- {% endcomment %}
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="{{ 'slick.min.js' | asset_url }}"></script>


<script>
$(document).ready(function(){
  $('.slider').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    arrows: true, // Ensure arrows are enabled
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: true, // Ensure arrows are enabled
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: true, // Ensure arrows are enabled
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 1,
        }
      }
    ]
  });

  $('a[data-slide]').click(function(e) {
     e.preventDefault();
     var slideno = $(this).data('slide');
     $('.slider').slick('slickGoTo', slideno - 1);
   });
});
</script>

{% comment %} -------CSS------- {% endcomment %}
{% stylesheet %}
.custom-button-area {
  padding: 30px 0 20px;
  text-align: center; 
}

.btn-link {
  display: inline-block;
  padding: 12px 24px;
  background-color: #ffffff; 
  color: #000000; 
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-family: "eurostile-extended", sans-serif; 
  font-weight: 500; 
  text-transform: uppercase;
  border: 1px solid #000000;
}

.btn-link:hover {
  background-color: #11322c; 
  transform: scale(1.05); 
  color: #ffffff; 
}

.btn-link:active {
  background-color: #11322c;
  transform: scale(1); 
}


.slider .image-x img {
  width: 100% !important; 
  height: auto;
}

{% endstylesheet %}



{% comment %} /*  -------SECTION CREATE-------  */ {% endcomment %}
{% schema %}  
    {
        "name": "Custom JS Slider Home",
        "settings": [],
        "presets": [{"name": "Custom JS Slider Home"}]
    }
{% endschema %}

Answer 1

媒体查询会针对小于 768 像素（平板电脑）和 480 像素（移动设备）的屏幕调整滑块。在平板电脑上，它通过将每个图像的宽度设置为 calc(33.33% - 20px) 以在它们之间提供一些间距来保持 3 个图像可见。在移动设备上，它更改为每张幻灯片 1 张图像（宽度：100%）。

.slider .image-x img {
  width: 100% !important; 
  height: auto;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .slider .image-x img {
    width: calc(33.33% - 20px) !important; /* Keeps 3 images visible with some spacing */
  }
  .slick-slider {
    max-width: 100%;
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .slider .image-x img {
    width: 100% !important; /* One image on mobile */
  }
  .slick-slider {
    max-width: 100%;
    padding: 0 10px;
  }
}

在slick设置中，我们为不同的断点指定不同的slidesToShow。默认为 3 张幻灯片，在移动设备（480 像素及以下）上，一次显示 1 张幻灯片。

$(document).ready(function(){
  $('.slider').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    arrows: true, 
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: true,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 3, /* Ensures 3 images on tablet */
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: true,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 1, /* Ensures 1 image on mobile */
        }
      }
    ]
  });
});