Flickity doesn't load on a shopify section

Question

I am trying to modify a shopify section so that it's images are a carousell with flickity but for some reason I can't get it to load. I want to input it via html so that i can modify settings conditionally with liquid but it looks like despite my efforts it never loads.

I am sure the schema is created and loaded correctly because all the images are there as intended, it's the issue of flickity engaging. (I know it will be buggy I'll debug it later I just need to know why it doesn't load at all for now.)

I removed some of the html for reading quality so beware, some of the css might not make sense.

{%- capture flickity_options -%}
{
  "prevNextButtons": false,
  "wrapAround": true,
  "dragThreshold": 15,
  "pauseAutoPlayOnHover": false,
  "autoPlay": {% if section.settings.autoplay %}{{ section.settings.cycle_speed | times: 1000 }}{% else %}false{% endif %},
  "pageDots": {% if section.blocks.size > 1 %}true{% else %}false{% endif %}
}
{%- endcapture -%}

<section id="section-{{ section.id }}" class="Section Section--spacingNormal" data-section-id="{{ section.id }}" data-section-type="timeline-with-carousell">
  <div class="Container">
    <div class="Timeline">
      <div class="Timeline__ListItem">
        <div class="Timeline__Item is-selected">
          <div class="Timeline__ImageWrapper Timeline-custom__flickity" data-flickity-config='{{ flickity_options }}'>
            {%- for block in section.blocks -%}
              <div class=" Timeline__Image{% if block.settings.apply_overlay %}Image--contrast{% endif %}" {% if block.settings.image %}style="background: url({{ block.settings.image | img_url: '1x1' }})"{% endif %} data-slide-index="{{ forloop.index0 }}">
                {%- if block.settings.image -%}
                  <div class="Timeline-custom__Image-inner Image--lazyLoad hide-no-js" data-bgset="{{ block.settings.image | img_url: 'x650' }} [(max-width: 640px)] | {{ block.settings.image | img_url: '1000x' }}"></div>
  
                  <noscript>
                    <div class="Timeline-custom__Image-inner" style="background-image: url({{ block.settings.image | img_url: '1000x' }})"></div>
                  </noscript>
                {%- else -%}
                  <div class="Timeline-custom__Image-inner">
                    <div class="PlaceholderBackground">
                      {%- capture placeholder -%}{% cycle 'lifestyle-1', 'lifestyle-2' %}{%- endcapture -%}
                      {{ placeholder | placeholder_svg_tag: 'PlaceholderBackground__Svg PlaceholderSvg--dark' }}
                    </div>
                  </div>
                {%- endif -%}
              </div>
            {%- endfor -%}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

.Timeline {
  box-shadow: 0 -2px 10px rgba(54, 54, 54, 0.2);
}

.Timeline__ListItem {
  position: relative;
  height: 540px;
  text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}

.Timeline__Item {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(54, 54, 54, 0.2);
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

.Timeline__ImageWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.Timeline__Image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: translateX(-50px) scale(1.1);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.Timeline__Inner {
  position: relative;
  padding: 80px 14px 40px 14px;
  max-height: 100%;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.Timeline__Header > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.Timeline__Header > .SectionHeader__Description {
  transform: translateY(50px);
}

.Timeline__Item.is-selected {
  opacity: 1;
  pointer-events: auto;
}
.Timeline__Item.is-selected .Timeline__Image {
  transform: translateX(0) scale(1.1);
}
.Timeline__Item.is-selected .Timeline__Header > * {
  opacity: 1;
  transition-delay: 0.5s;
  transform: translateY(0);
}

@media screen and (max-width: 640px) {
  .shopify-section--timeline {
    border-top: none !important;
  }

  .shopify-section--timeline .Section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .shopify-section--timeline .Container {
    padding-left: 0;
    padding-right: 0;
  }

  .Timeline__Header .Heading,
  .Timeline__Header .Rte a {
    color: inherit;
  }

  .Timeline__Header .SectionHeader__Description {
    margin: 34px 30px 0 30px;
  }
}
@media screen and (min-width: 641px) {
  .Timeline__ListItem {
    max-width: 1230px;
    margin: 0 auto;
    height: 400px;
    text-shadow: none;
  }

  .Timeline__Item {
    align-items: flex-end;
    background-color: var(--light-background);
  }

  .Timeline__ImageWrapper,
  .Timeline__Inner {
    flex: none;
    width: 50%;
  }

  .Timeline__ImageWrapper {
    position: relative;
    height: 100%;
  }
  .Timeline__ImageWrapper::after {
    display: none;
    /* Remove any contrast that may have been added to image */
  }

  .Timeline__Image {
    transform: translateX(-60px) scale(1.1);
  }

  .Timeline__Inner {
    padding: 34px 40px;
    color: var(--text-color);
  }

  .Timeline__Header {
    text-align: left;
  }
}
@media screen and (min-width: 1008px) {
  .Timeline__ListItem {
    height: 515px;
  }

  .Timeline__Inner {
    padding: 54px 60px;
  }
}


/* Custom timeline variant */

.Timeline-custom__flickity::after {
  content: "flickity";
  display: none;
}

.Timeline-custom__Image-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

Answer 1

As usual it has been the stupidest thing that could have caused this, it's data-flickity not data-flickity-config