Gallery Slide Show Isn't Working (Dawn Theme)

Hi,

So I’m sort of asking this question in the wrong section of the forum but I ain’t getting help with this in Technical Q&A.

I have added a custom gallery section with a mobile slideshow to Dawn theme and I’ve run into an issue. The slider for mobile doesn’t work.

I contacted the live chat yesterday and they sent a help request to the Theme Experts and now I’m waiting for an email. But… maybe someone in here can help.

I have looked at the code a lot and I can’t seem to figure out what’s wrong with it.

Here’s the liquid file:


  {% style %}
    #section-id-{{ section.id }} .gallery__item {
      height: {{ section.settings.mobile_image_height }}px;
    }
    #section-id-{{ section.id }} .overlay-text__title {
      font-size: {{ section.settings.title_size_mobile }}px;
      {%- if section.settings.title_size_mobile >= 90 -%}
      line-height: 1em;
      {%- endif %}
    }
    @media (min-width: 768px) {
      #section-id-{{ section.id }} .gallery__item {
        height: {{ section.settings.desktop_image_height }}px;
      }
      #section-id-{{ section.id }} .overlay-text__title {
        {%- assign title_size_medium = section.settings.title_size | times: 0.7 | at_least: section.settings.title_size_mobile -%}
        font-size: {{ title_size_medium }}px;
        {%- if title_size_medium >= 90 -%}
        line-height: 1em;
        {%- endif %}
      }
    }
    @media (min-width: 1100px) {
      #section-id-{{ section.id }} .overlay-text__title {
        font-size: {{ section.settings.title_size }}px;
        {%- if section.settings.title_size >= 90 -%}
        line-height: 1em;
        {%- endif %}
      }
    }
  {% endstyle %}

  {%- capture super_container_class -%}
    {%- liquid
      if section.settings.enable_row_spacing
        if section.settings.use_alt_bg
          echo 'use-alt-bg fully-padded-row--medium'
        else
          echo 'fully-spaced-row--medium'
        endif
      elsif section.settings.use_alt_bg
        echo 'use-alt-bg'
      endif
    -%}
  {%- endcapture -%}

  

    {%- unless section.settings.full_width -%}
{%- endunless -%}

    

      

        {%- for block in section.blocks -%}
          {%- assign forloop_mod_grid = forloop.index0 | modulo: section.settings.grid -%}
          {%- if forloop.index0 > 0 and forloop_mod_grid == 0 -%}
            

          {%- endif -%}
          {%- assign show_overlay_text = false -%}
          {%- if block.settings.title != blank or block.settings.subheading != blank or block.settings.button_label != blank -%}
            {%- assign show_overlay_text = true -%}
          {%- endif -%}

          

            {%- if block.settings.link != blank -%}{%- endif -%}

            {%- if block.settings.image == blank -%}
              

                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              

            {%- else -%}
              
                
              

            {%- endif -%}

            {%- if show_overlay_text -%}
            
              

                

                  {%- if block.settings.subheading != blank -%}
                    
{{ block.settings.subheading | escape }}

                  {%- endif -%}
                  {%- if block.settings.title != blank -%}
                    ## {{ block.settings.title | newline_to_br }}
                  {%- endif -%}
                  {%- if block.settings.button_label != blank -%}
                    
                      {{ block.settings.button_label }}
                    

                  {%- endif -%}
                

              

            

            {%- endif -%}

            {%- if block.settings.link != blank -%}{%- endif -%}
          

        {%- endfor -%}
      

    

    {%- unless section.settings.full_width -%}
{%- endunless -%}
  

{% schema %}
{
  "name": "Gallery",
  "class": "section-gallery",
  "settings": [
    {
      "type": "range",
      "id": "grid",
      "min": 1,
      "max": 4,
      "step": 1,
      "label": "Max images per row",
      "default": 2
    },
    {
      "type": "range",
      "id": "desktop_image_height",
      "min": 100,
      "max": 1000,
      "step": 10,
      "unit": "px",
      "label": "Desktop image row heights",
      "default": 460
    },
    {
      "type": "range",
      "id": "mobile_image_height",
      "min": 100,
      "max": 700,
      "step": 10,
      "unit": "px",
      "label": "Mobile image row heights",
      "default": 400
    },
    {
      "type": "range",
      "id": "title_size",
      "min": 20,
      "max": 150,
      "step": 2,
      "unit": "px",
      "label": "Desktop heading text size",
      "default": 30
    },
    {
      "type": "range",
      "id": "title_size_mobile",
      "min": 20,
      "max": 150,
      "step": 2,
      "unit": "px",
      "label": "Mobile heading text size",
      "default": 22
    },
    {
      "id": "enable_margin",
      "type": "checkbox",
      "label": "Add spacing between images",
      "default": true
    },
    {
      "id": "enable_row_spacing",
      "type": "checkbox",
      "label": "Add spacing around section",
      "default": true
    },
    {
      "id": "full_width",
      "type": "checkbox",
      "label": "Full page width",
      "default": false
    },
    {
      "id": "use_alt_bg",
      "type": "checkbox",
      "label": "Use alternate section color",
      "default": false
    },
    {
      "id": "enable_carousel",
      "type": "checkbox",
      "label": "Enable mobile slideshow",
      "default": false
    },
    {
      "id": "overlay_style",
      "type": "select",
      "label": "Overlay style",
      "default": "full",
      "options": [
        {
          "value": "full",
          "label": "Tint"
        },
        {
          "value": "box",
          "label": "Box"
        },
        {
          "value": "shadow",
          "label": "Text shadow"
        },
        {
          "value": "full image-overlay--bg-shadow",
          "label": "Text shadow and tint"
        },
        {
          "value": "no_background",
          "label": "No background"
        }
      ]
    },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "default": "primary",
      "options": [
        {
          "label": "Button - primary",
          "value": "primary"
        },
        {
          "label": "Button - secondary",
          "value": "secondary"
        },
        {
          "label": "Link",
          "value": "link"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Image alignment",
          "info": "Used to keep the subject of your focus in view",
          "default": "center center",
          "options": [
            {
              "value": "top left",
              "label": "Top left"
            },
            {
              "value": "top center",
              "label": "Top center"
            },
            {
              "value": "top right",
              "label": "Top right"
            },
            {
              "value": "center left",
              "label": "Middle left"
            },
            {
              "value": "center center",
              "label": "Middle center"
            },
            {
              "value": "center right",
              "label": "Middle right"
            },
            {
              "value": "bottom left",
              "label": "Bottom left"
            },
            {
              "value": "bottom center",
              "label": "Bottom center"
            },
            {
              "value": "bottom right",
              "label": "Bottom right"
            }
          ]
        },
        {
          "type": "checkbox",
          "id": "enlarge_image",
          "label": "Enlarge image",
          "default": false
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Subheading",
          "default": "Gallery"
        },
        {
          "type": "textarea",
          "id": "title",
          "label": "Heading",
          "default": "Tell your story"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "label": "Text overlay position",
          "options": [
            {
              "value": "top left",
              "label": "Top left"
            },
            {
              "value": "top center",
              "label": "Top center"
            },
            {
              "value": "top right",
              "label": "Top right"
            },
            {
              "value": "center left",
              "label": "Middle left"
            },
            {
              "value": "center center",
              "label": "Middle center"
            },
            {
              "value": "center right",
              "label": "Middle right"
            },
            {
              "value": "bottom left",
              "label": "Bottom left"
            },
            {
              "value": "bottom center",
              "label": "Bottom center"
            },
            {
              "value": "bottom right",
              "label": "Bottom right"
            }
          ],
          "default": "bottom left"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Gallery",
      "settings": {
      },
      "blocks": [
        {
          "type": "image",
          "settings": {
            "enlarge_image": true
          }
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image",
          "settings": {
            "enlarge_image": true
          }
        }
      ]
    }
  ]
}
{% endschema %}

Hi @Jiozx ,

Where did you copy the code?

I need to check the result when adding the code so I can guide you in detail.

@Litos I got the code from this forum… right now it looks like this on mobile instead of a slide show

Hi @Jiozx ,

I think instead of you adding Gallery section and customizing everything that isn’t obvious, you can use Slideshow section and customize it.

You just need to add the slideshow section and send me the preview link, I will help you change it to show like the screenshot you sent

@Litos that’s not what I want. I only want the slideshow to be available on mobile.

Hi @Jiozx ,

Yes, please send me the code of slideshow.liquid file, I will help you add option to choose to display slideshow in desktop, mobile or both.

So you can display it on mobile without worrying about desktop.

It’s not the same but thanks for your offer

Hi @Jiozx ,

Because if you want to add slider you need to add JS for it so with file section it will be impossible for someone to debug or guide you in detail.

Have you added JS and CSS code for this section?

Yes