Flickity Slider 在最后一次滑动后出现空间问题，滑块继续滚动

Question

我在使用 Flickity 滑块时遇到了问题； 问题是滑块就像我想要的那样完美地坐在那里......但是...... 滑动后，它向左移动太多，留下大量空间；我看着 代码什么都没有出现；也许滑块的设置有问题？

     <div class='carousel-section'>
 <div class='carousel-wrapper'>
 <h2>
  Some Clients About us
   </h2>
  <div class="carousel ">
  <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
 <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
     when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
     It has survived not only five centuries, but also the leap into electronic typesetting, 
     remaining essentially unchanged. It was popularised in the 1960s with the 
     release of Letraset sheets containing Lorem Ipsum passages, and more recently
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        LOREM
      </h5>

  <h6>IPSUM </h6>
    </div>
  </div>

   </div>
  </div>
</div>

css：

 .carousel-section{
  width:100%;
  height:90vh;
  font-family: 'Montserrat', sans-serif;
  background-color:#DFE6E9;
  border-top:1px solid #c8cfd1;
  display:flex;
  flex-direction:column;
} 
.carousel-wrapper{
  width:100%;
  height:90vh;
  font-family: 'Montserrat', sans-serif;
  background-color:#DFE6E9;
  border-top:1px solid #c8cfd1;
  display:flex;
  flex-direction:column;
  padding-left:10rem;
  padding-top:5rem;
  position:relative;
}



.carousel {
  background: #DFE6E9;
  margin-bottom:4rem;
  position:absolute;
  top:10rem;
  left:0;
  width:100%;
  padding-left:10rem;
}

.carousel-cell {
  width: 25%;
  height: 330px;
  margin-right: 10px;
  display:flex;
  flex-direction:column;
  background: #DFE6E9;
  padding:0 1rem 1rem 1rem;
  align-items:flex-start;
  border-right:1px solid #c8cfd1; 
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.button {
  font-size: 22px;
}

.button-group {
  margin-bottom: 20px;
}

  .carousel-cell-text p{
    font-size:.8rem;   
    padding-right:2rem;
    margin-top:2rem;
    line-height:1.4rem;

}

  .carousel-cell-clientinfo h5{
    margin-top:1.2rem;  
}

  .carousel-cell-clientinfo h6{
     font-size:.8rem;   
     font-weight:lighter;
     margin-top:.5rem;  
}

代码在 CMS 系统上，所以模块来自哪里；此外，有两个来自 Flickity 滑块的文件（css 和 javascript）作为标准库连接到该模块；

在这里可以看出右侧留有太多空白空间，在某个点之前滑块必须停止滚动以使幻灯片占据整个部分，但它并没有停止...... 这就是问题所在……

Answer 1

在通过 JS 初始化 Flickity 时尝试使用此选项：

contain: true

Answer 2

尝试设置滑块父级的宽度。我最好的猜测是轮播，因为在轻弹按钮位于此容器中。或者只是使用您用于定位的任何内容来限制旋转木马容器的大小。 CSS 网格示例 minmax(100%, 400px)