Flickity 滑块问题，最后一张幻灯片后有空间，滑块继续滚动

Question

我在使用 Flickity 滑块时遇到了问题；\n 问题是滑块完全按照我想要的方式放置在那里...但是...\n 在我滑动之后，它向左移动太多并留下了很大的痕迹后面的空间量；我查看了 \n 代码，没有任何结果；也许滑块的设置有问题？

\n\n

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

\n\n

CSS：

\n\n

 .carousel-section{\n  width:100%;\n  height:90vh;\n  font-family: \'Montserrat\', sans-serif;\n  background-color:#DFE6E9;\n  border-top:1px solid #c8cfd1;\n  display:flex;\n  flex-direction:column;\n} \n.carousel-wrapper{\n  width:100%;\n  height:90vh;\n  font-family: \'Montserrat\', sans-serif;\n  background-color:#DFE6E9;\n  border-top:1px solid #c8cfd1;\n  display:flex;\n  flex-direction:column;\n  padding-left:10rem;\n  padding-top:5rem;\n  position:relative;\n}\n\n\n\n.carousel {\n  background: #DFE6E9;\n  margin-bottom:4rem;\n  position:absolute;\n  top:10rem;\n  left:0;\n  width:100%;\n  padding-left:10rem;\n}\n\n.carousel-cell {\n  width: 25%;\n  height: 330px;\n  margin-right: 10px;\n  display:flex;\n  flex-direction:column;\n  background: #DFE6E9;\n  padding:0 1rem 1rem 1rem;\n  align-items:flex-start;\n  border-right:1px solid #c8cfd1; \n}\n\n/* cell number */\n.carousel-cell:before {\n  display: block;\n  text-align: center;\n  line-height: 200px;\n  font-size: 80px;\n  color: white;\n}\n\n.button {\n  font-size: 22px;\n}\n\n.button-group {\n  margin-bottom: 20px;\n}\n\n  .carousel-cell-text p{\n    font-size:.8rem;   \n    padding-right:2rem;\n    margin-top:2rem;\n    line-height:1.4rem;\n\n}\n\n  .carousel-cell-clientinfo h5{\n    margin-top:1.2rem;  \n}\n\n  .carousel-cell-clientinfo h6{\n     font-size:.8rem;   \n     font-weight:lighter;\n     margin-top:.5rem;  \n}\n

\n\n

代码位于 CMS 系统上，因此模块来自于此；此外，Flickity slider 有两个文件（css 和 javascript）作为标准库连接到该模块；

\n\n

\n\n

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

\n

Answer 1

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

contain: true