在Cargo站点添加Flickity jQuery轮播插件遇初始化问题求助

问题核心 #

你在Cargo站点集成Flickity轮播时，遇到的关键问题是Cargo编辑器会自动转义HTML属性中的双引号，导致data-flickity-options内的JSON配置格式被破坏，最终造成gallery-cell元素位置异常。

解决方案：改用JS代码初始化Flickity #

避开HTML属性的引号转义陷阱，直接通过JavaScript配置并初始化轮播，具体步骤如下：

1. 删除HTML轮播容器上的data-flickity-options属性
2. 添加独立JS脚本块，在其中编写Flickity配置参数并完成初始化

修改后的完整代码 #

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<div class="main-gallery js-flickity">
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
</div>

<script>
// 初始化Flickity并配置参数
$('.js-flickity').flickity({
  cellAlign: 'left',
  contain: true
});
</script>

额外布局优化建议 #

轮播单元格需要明确的尺寸才能正常布局，可添加如下CSS样式（根据需求调整数值）：

.gallery-cell {
  width: 60%;
  height: 200px;
  margin-right: 12px;
  background-color: #eee;
}

内容的提问来源于stack exchange，提问作者newbie2code