javascript - Flickity Slider 在上次滑动后出现空格问题， slider 一直滚动

Question

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

     <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 slider 的文件(css 和 javascript)作为标准库连接到此模块；

这里可以看到右侧留有太多空白，在某个点之前 slider 必须停止滚动才能让幻灯片占据整个部分，但它不会停止...就是这个问题……

Answer 1

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

contain: true