Custom Flickity Section not working, when rendered two times

BosiDev
New Member
7 0 0

Hey Guys!

I have a Problem, which drives me insane!


I created a custom dynamic section using Flickity to display some Info on the homepage for mobile view and everything is working fine, when i insert the section via the theme editor on the homepage.
When i try to to insert two instances of the same section the second flickity is not working! After switching the position of the sections i recognized that its always the second instance failing and only the first one is working.

 

It is also not working, when i create another Flickity section. Its always the second one not working. I think i do something wrong, since multiple instances of shopify native sections such as "slideshow" are working fine. 

Can someone figure out, what the Problem is? 
Thank you in advance!

 

Its the ReviewCarousel div´s and the flickity is only showing on mobile (Max 640px)
Storefront is this staging theme

 

Here is my Code for the section: 

 

{%- capture flickity_options -%}
{
  "prevNextButtons": false,
  "wrapAround": true,
  "watchCSS": true,
  "pageDots": false
}
{%- endcapture -%}

<div class="ReviewCarousel">
  <div class="ReviewCarousel__Heading">
    <div class="SectionHeader__Heading Heading u-h1">
      <h1>{{ section.settings.carousel_heading }}</h1>
    </div>
    <div class="Icon--reviews reviews-stars ReviewCarousel__Icons">
      {%- render 'icon' with 'star' -%}
      {%- render 'icon' with 'star' -%}
      {%- render 'icon' with 'star' -%}
      {%- render 'icon' with 'star' -%}
      {%- render 'icon' with 'star' -%}
    </div>
    <div class="average-review">
      <h5 class="SectionHeader__SubHeading Heading u-h5">Durchschnittliche Bewertung: {{ section.settings.average_rating }}</h5>
    </div>
  </div>

  <div class="main-carousel ReviewCarousel__Container" data-flickity='{{ flickity_options }}'>
    {%- for block in section.blocks -%}
      <div class="carousel-cell">
        <div class="ReviewBlock">
          <div class="ReviewBlock__Header">
            <div class="Icon--reviews reviews-stars">
              {%- render 'icon' with 'star' -%}
              {%- render 'icon' with 'star' -%}
              {%- render 'icon' with 'star' -%}
              {%- render 'icon' with 'star' -%}
              {%- render 'icon' with 'star' -%}
            </div>
            <div class="verification">
              <span>Verifizierte Bewertung</span>
            </div>
          </div>
          <div class="ReviewBlock__Content">
            {{ block.settings.review_content }}
          </div>
          <div class="ReviewBlock__Heading">
            {{ block.settings.customer_name }}
          </div>
          <div class="ReviewBlock__Rating">
            <a href="https://g.page/r/CXIZ0ZATPUUIEAE" target="_blank" rel="noopener noreferrer"><p><u>55+ weitere Rezensionen auf Google ansehen</u></p></a>
          </div>
        </div>
      </div>
    {%- endfor -%}
  </div>
</div>

{% schema %}
{
  "name": "Review Carousel",
  "class": "Section--spacingNormal",
  "max_blocks": 6,
  "settings": [
    {
      "type": "text",
      "id": "carousel_heading",
      "label": "Heading"
    },
    {
      "type": "text",
      "id": "average_rating",
      "label": "Average Rating"
    }
  ],
  "blocks": [
    {
      "type": "review",
      "name": "Review",
      "settings": [
        {
          "type": "text",
          "id": "customer_name",
          "label": "Customer Name"
        },
        {
          "type": "textarea",
          "id": "review_content",
          "label": "Review Content"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Review Carousel"
    }
  ]
}
{% endschema %}

 

 

Bosi
Replies 0 (0)