Glide JS carousel breaks on any section adjustments

leungvi8
Tourist
11 1 1

Hi Everyone,

Thanks for taking a look at this question, any feedback would be greatful. I created a logo carousel for my store. I installed glide.js, built the whole thing using blocks (see below). Everything works great, from admin and frontend of the store. However, if a user we're to make an adjustment to anything in the section in the dashboard, only one of the logos becomes visible and seems like all the other logos are either hidden and / or the JS breaks. This only happens in the backend, and never on the frontend of the site.

Image 1 (below) - Preview of the section, and the carousel dashboard

Image 2 (below)- shows an option clicked- I clicked change logos to grayscale, and the carousel breaking.

Code at the very bottom

Appreciate any help. Thanks again!

 

Logo1.png  

 

Logo2.png

 

{%- assign set = section.settings -%}
{% assign blockcount = 0 %}

{% style %}

{% if set.logo_grayscaled %}
    #lcarousel img{
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }

    #lcarousel img:hover{
        -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
        filter: grayscale(0%);
    }
{% endif %}

#lcarousel > div.glide__arrows > button > i {
    color: {{set.arrows_color}};
  }

{% endstyle %}

<div class="wrapper" style="background-color:{{set.background_color}}">
    <div class="container py-5">
        <div class="row">
            <div class="glide" id="lcarousel">
                <div class="glide__track" data-glide-el="track">
                    {%- if section.blocks.size > 0 -%}
                        <ul class="glide__slides">
                            {% for block in section.blocks %}
                                <li class="glide__slide" style="padding:15px" >
                                    {%- assign setb = block.settings -%}
                                    <div class="lcarousel__imgcontainer">
                                        <a href="{{setb.logo_link}}"
                                        target="blank"><img src="{{setb.logo_img | img_url: 'x500'}}" alt="{{setb.logo_img.alt}}"></a>
                                    </div>
                                    {%- if setb.logo_title != blank -%}
                                        <p class="text-center pt-1">{{ setb.logo_title }}</p>
                                    {% endif %}
                                </li>
                                {% assign blockcount = blockcount | plus: 1 %}
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>

                {% assign blockcount = blockcount | minus: 1%}
                <div class="glide__bullets" data-glide-el="controls[nav]">
                    {% for i in (0..blockcount) %}
                    <button class="glide__bullet" data-glide-dir="={{ i }}" aria-label="Goto Slide {{ i }}"></button>
                    {% endfor %}
                </div>
                <div class="glide__arrows" data-glide-el="controls">
                    <button class="glide__arrow glide__arrow--left" data-glide-dir="<" aria-label="Previous Slide"><i class="fas fa-chevron-left"></i></button>
                    <button class="glide__arrow glide__arrow--right" data-glide-dir=">" aria-label="Next Slide"><i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>



{% schema %}
{
    "name": "Logos Carousel",
    "tag": "section",
    "class": "lcarousel-section",
    "max_blocks": 9,
    "settings": [
        {
            "type": "color",
            "id": "background_color",
            "label": "Background color",
            "default": "#FFFFFF"
        },
        {
            "type": "color",
            "id": "arrows_color",
            "label": "Arrow Icons color",
            "default": "#000000"
        },
        {
            "type": "checkbox",
            "id": "logo_grayscaled",
            "default": false,
            "label": "Logos Grayscaled",
            "info": "Web automate logos to be black and white for design aesthetics. Note: This feature does not work in IE11 or lesser versions"
        }
    ],
    "blocks": [
        {
        "type": "Logos",
        "name": "logo",
        "settings": [
            {
                "type": "image_picker",
                "id": "logo_img",
                "label": "Logo Image",
                "info": "Required"
            },
            {
                "type": "text",
                "id": "logo_title",
                "label": "Logo - brand text",
                "info": "Optional"
            },
            {
                "type": "color",
                "id": "arrows_color",
                "label": "Background color",
                "default": "#000000"
            },
            {
                "type": "url",
                "id": "logo_link",
                "label": "Logo URL"
            }
        ]
        }
    ],
    "presets": [
        {
            "name": "Logos Carousel",
            "category": "Carousel"
        }
    ]
}
{% endschema %}

 

0 Likes
Mircea_Piturca
Shopify Partner
1485 42 307

It is most likely a JS problem. Making changes in Theme Editor will refresh the page DOM. If your slider is not listening to TE events and rebinds the functionality when this happens, it will break.

Finally—Add variant descriptions to your products
0 Likes
Quyen_Beo
Explorer
58 7 12

You should look into how default Shopify section handle the event
Eg: Slideshow section on assets/theme.js
They have listener to handle when block select, deselect or unload ...

Quyen_Beo_0-1618419172724.png

 

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes