Custom Flickity Section not working, when rendered two times

Technical Q&A
1

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 -%}

  

    

      # {{ section.settings.carousel_heading }}
    

    
      {%- render 'icon' with 'star' -%}
      {%- render 'icon' with 'star' -%}
      {%- render 'icon' with 'star' -%}
      {%- render 'icon' with 'star' -%}
      {%- render 'icon' with 'star' -%}
    

    
      ##### Durchschnittliche Bewertung: {{ section.settings.average_rating }}
    

  

  
    {%- for block in section.blocks -%}
      

        

          

            

              {%- render 'icon' with 'star' -%}
              {%- render 'icon' with 'star' -%}
              {%- render 'icon' with 'star' -%}
              {%- render 'icon' with 'star' -%}
              {%- render 'icon' with 'star' -%}
            

            
              Verifizierte Bewertung
            

          

          
            {{ block.settings.review_content }}
          

          
            {{ block.settings.customer_name }}
          

          
            [

55+ weitere Rezensionen auf Google ansehen

](https://g.page/r/CXIZ0ZATPUUIEAE)
          

        

      

    {%- endfor -%}
  

{% 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 %}
2

Where’s the code for initialising flickity?. It’s probably only finding the first occurrence and executing on that. You likely need to do something like document.querySelectorAll, then loop through each and execute flickity.

3

Hey @iDoThemes ,

thanks for your reply! I initialize the flickity with pure html and flickity options. I thought that would be enough since its working fine with the first instance of it. Maybe i have to switch to JS to initialize. Will try it out!