How to correctly display a slider within tabs?

Eduard09993
New Member
5 0 0

Hi, I'm trying to make a tab, inside which there will be a slider with information and one product, the idea is as follows: the user selects a scope in the tabs, the slider displays step-by-step instructions.

At the moment I have the slider displayed incorrectly, sliders are made for different categories at the same time, no matter which tab is selected. Could you please help me with this problem?

I would like the correct snippet to be displayed when the tab is active and the others to be hidden.

I am attaching the code below.

 

<div class="tab-section">
    <div class="page-width">
        <div class="section-header text-center">
            {% if section.settings.section_title != blank %}
            <h2 class="h2">{{ section.settings.section_title | escape }}</h2>
            {% endif %}
            {% if section.settings.subheading != blank %}
            <div class="rte">{{ section.settings.subheading }}</div>
            {% endif %}
        </div>
        <div class="tab-container">
            <!-- Tab items -->
            <div class="tabs">
                {% for block in section.blocks %}
                <div class="tab-item {% if forloop.first == true %}active{% endif %}">
                    {% case block.type %}
                    {% when 'face-care-slideshow' %}
                    {{ block.settings.heading_tab }}
                    {% when 'hair-care-slideshow' %}
                    {{ block.settings.heading_tab }}
                    {% when 'body-care-slideshow' %}
                    {{ block.settings.heading_tab }}
                    {% endcase %}
                </div>
                {% endfor %}
                <div class="line"></div>
            </div>
            <!-- Tab content -->
            <div class="tab-content">
                {% for block in section.blocks %}
                <div class="tab-pane {% if forloop.first == true %}active{% endif %}">
                    {% if block.type == 'face-care-slideshow' %}
                    {% render 'slideshow-face-steps-snippet' %}
                    {% endif %}
                    {% if block.type == 'hair-care-slideshow' %}
                    {% render 'slideshow-hair-steps-snippet' %}
                    {% endif %}
                    {% if block.type == 'body-care-slideshow' %}
                    {% render 'slideshow-body-steps-snippet' %}
                    {% endif %}
             </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

 

 

 

 

 

 

Replies 5 (5)

Vaibhavi_Gabani
Shopify Partner
16 0 0

Can You Send more Details With Image so that i can solve

 

Eduard09993
New Member
5 0 0

yeah sure, that's what the section looks like on the website.
That is, in all the tabs at the top, absolutely all the snippets are displayed, although I try to separate them so that each tab corresponds to a specific snippet.

I've attached the full code belowСнимок экрана 2023-11-21 в 20.04.57.pngСнимок экрана 2023-11-21 в 20.04.43.png

<div class="tab-section">
    <div class="page-width">
        <div class="section-header text-center">
            {% if section.settings.section_title != blank %}
            <h2 class="h2">{{ section.settings.section_title | escape }}</h2>
            {% endif %}
            {% if section.settings.subheading != blank %}
            <div class="rte">{{ section.settings.subheading }}</div>
            {% endif %}
        </div>
        <div class="tab-container">
            <!-- Tab items -->
            <div class="tabs">
                {% for block in section.blocks %}
                <div class="tab-item {% if forloop.first == true %}active{% endif %}">
                    {% case block.type %}
                    {% when 'face-care-slideshow' %}
                    {{ block.settings.heading_tab }}
                    {% when 'hair-care-slideshow' %}
                    {{ block.settings.heading_tab }}
                    {% when 'body-care-slideshow' %}
                    {{ block.settings.heading_tab }}
                    {% endcase %}
                </div>
                {% endfor %}
                <div class="line"></div>
            </div>
            <!-- Tab content -->
            <div class="tab-content">
                {% for block in section.blocks %}
                <div class="tab-pane {% if forloop.first == true %}active{% endif %}">
                    {% if block.type == 'face-care-slideshow' %}
                    {% render 'slideshow-face-steps-snippet' %}
                    {% endif %}
                    {% if block.type == 'hair-care-slideshow' %}
                    {% render 'slideshow-hair-steps-snippet' %}
                    {% endif %}
                    {% if block.type == 'body-care-slideshow' %}
                    {% render 'slideshow-body-steps-snippet' %}
                    {% endif %}
             </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
<style>
    .tabs {
        display: flex;
        position: relative;
        gap: 5px;
    }

    .tabs .line {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 6px;
        border-radius: 15px;
        background-color: {{ section.settings.line_color }};
        transition: all 0.2s ease;
    }

    .tab-item {
        min-width: 80px;
        padding: 16px 20px 11px 20px;
        font-size: 20px;
        text-align: center;
        color: {{ section.settings.button_color }};
        background-color: {{ section.settings.button_background }};
        cursor: pointer;
        transition: all 0.5s ease;
    }

    .tab-icon {
        font-size: 24px;
        width: 32px;
        position: relative;
        top: 2px;
    }
    .tab-item.active,
    .tab-item:hover {
        color: {{ section.settings.button_hover_color }};
        background-color: {{ section.settings.button_hover_background }};
    }
    .tab-pane {
        color: #333;
        display: none;
    }

    .tab-pane.active {
        display: block;
    }

</style>


{% schema %}
{
    "name": "Tab Section",
    "max_blocks": 5,
    "settings": [
        {
        "type": "text",
        "id": "section_title",
        "label": "Heading",
        "default": "Talk about your brand"
      },
      {
        "type": "richtext",
        "id": "subheading",
        "label":  "Subheading",
        "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      },
      {
          "type": "header",
          "content": "Tab Settings"
      },
      {
          "type": "color",
          "id": "button_color",
          "label": "Button color",
          "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "button_background",
        "label": "Button background",
        "default": "#3a3a3a"
        },
        {
            "type": "color",
            "id": "button_hover_color",
            "label": "Hover color",
            "default": "#3a3a3a"
        },
        {
          "type": "color",
          "id": "button_hover_background",
          "label": "Hover background",
          "default": "#fed7e0"
        }
    ],
    "blocks": [
        {
            "type": "face-care-slideshow",
            "name": "Face care slideshow",
            "settings": [
                {
                  "type": "text",
                  "id": "heading_tab",
                  "label": "Heading Tab",
                  "default": "Tab heading"
                },
                {
                  "type": "color_scheme",
                  "id": "color_scheme",
                  "label": "t:sections.all.colors.label",
                  "default": "background-1"
                },
                {
                  "type": "select",
                  "id": "heading_size",
                  "options": [
                    {
                      "value": "h2",
                      "label": "t:sections.all.heading_size.options__1.label"
                    },
                    {
                      "value": "h1",
                      "label": "t:sections.all.heading_size.options__2.label"
                    },
                    {
                      "value": "h0",
                      "label": "t:sections.all.heading_size.options__3.label"
                    }
                  ],
                  "default": "h1",
                  "label": "t:sections.all.heading_size.label"
                },
                {
                  "type": "select",
                  "id": "text_style",
                  "options": [
                    {
                      "value": "subtitle",
                      "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
                    },
                    {
                      "value": "caption-with-letter-spacing",
                      "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
                    }
                  ],
                  "default": "caption-with-letter-spacing",
                  "label": "Tagline style"
                },
                {
                  "type": "select",
                  "id": "text_size",
                  "options": [
                    {
                      "value": "small",
                      "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
                    },
                    {
                      "value": "medium",
                      "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
                    },
                    {
                      "value": "large",
                      "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
                    }
                  ],
                  "default": "medium",
                  "label": "Tagline size"
                },
                {
                  "type": "select",
                  "id": "box_align",
                  "options": [
                    {
                      "value": "top-left",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
                    },
                    {
                      "value": "top-center",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
                    },
                    {
                      "value": "top-right",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
                    },
                    {
                      "value": "middle-left",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
                    },
                    {
                      "value": "middle-center",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
                    },
                    {
                      "value": "middle-right",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
                    },
                    {
                      "value": "bottom-left",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
                    },
                    {
                      "value": "bottom-center",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
                    },
                    {
                      "value": "bottom-right",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
                    }
                  ],
                  "default": "middle-center",
                  "label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },
                {
                  "type": "select",
                  "id": "text_alignment",
                  "options": [
                    {
                      "value": "left",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
                    },
                    {
                      "value": "center",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
                    },
                    {
                      "value": "right",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
                    }
                  ],
                  "default": "center",
                  "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
                },
                {
                  "type": "header",
                  "content": "t:sections.slideshow.settings.mobile.content"
                },
                {
                  "type": "select",
                  "id": "text_alignment_mobile",
                  "options": [
                    {
                      "value": "left",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
                    },
                    {
                      "value": "center",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
                    },
                    {
                      "value": "right",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
                    }
                  ],
                  "default": "center",
                  "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
                },







                {
                  "type": "header",
                  "content": "Slide#1"
                },
                {
                  "type": "product",
                  "id": "product_slide1",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide1",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide1",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide1",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide1",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide1",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide1",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide1",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },









                {
                  "type": "header",
                  "content": "Slide#2"
                },
                {
                  "type": "product",
                  "id": "product_slide2",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide2",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide2",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide2",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide2",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide2",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide2",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide2",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },










                {
                  "type": "header",
                  "content": "Slide#3"
                },
                {
                  "type": "product",
                  "id": "product_slide3",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide3",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide3",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide3",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide3",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide3",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide3",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide3",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },









                {
                  "type": "header",
                  "content": "Slide#4"
                },
                {
                  "type": "product",
                  "id": "product_slide4",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide4",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide4",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide4",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide4",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide4",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide4",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide4",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },








                {
                  "type": "header",
                  "content": "Slide#5"
                },
                {
                  "type": "product",
                  "id": "product_slide5",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide5",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide5",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide5",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide5",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide5",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide5",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide5",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },










                {
                  "type": "header",
                  "content": "Slide#6"
                },
                {
                  "type": "product",
                  "id": "product_slide6",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide6",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide6",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide6",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide6",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide6",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide6",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide6",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                }


  







              
                
                
            ]
        },
        
        {
            "type": "hair-care-slideshow",
            "name": "Hair care slideshow",
            "settings": [
                {
                  "type": "text",
                  "id": "heading_tab",
                  "label": "Heading Tab",
                  "default": "Tab heading"
                },
                {
                  "type": "color_scheme",
                  "id": "color_scheme",
                  "label": "t:sections.all.colors.label",
                  "default": "background-1"
                },
                {
                  "type": "select",
                  "id": "heading_size",
                  "options": [
                    {
                      "value": "h2",
                      "label": "t:sections.all.heading_size.options__1.label"
                    },
                    {
                      "value": "h1",
                      "label": "t:sections.all.heading_size.options__2.label"
                    },
                    {
                      "value": "h0",
                      "label": "t:sections.all.heading_size.options__3.label"
                    }
                  ],
                  "default": "h1",
                  "label": "t:sections.all.heading_size.label"
                },
                {
                  "type": "select",
                  "id": "text_style",
                  "options": [
                    {
                      "value": "subtitle",
                      "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
                    },
                    {
                      "value": "caption-with-letter-spacing",
                      "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
                    }
                  ],
                  "default": "caption-with-letter-spacing",
                  "label": "Tagline style"
                },
                {
                  "type": "select",
                  "id": "text_size",
                  "options": [
                    {
                      "value": "small",
                      "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
                    },
                    {
                      "value": "medium",
                      "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
                    },
                    {
                      "value": "large",
                      "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
                    }
                  ],
                  "default": "medium",
                  "label": "Tagline size"
                },
                {
                  "type": "select",
                  "id": "box_align",
                  "options": [
                    {
                      "value": "top-left",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
                    },
                    {
                      "value": "top-center",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
                    },
                    {
                      "value": "top-right",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
                    },
                    {
                      "value": "middle-left",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
                    },
                    {
                      "value": "middle-center",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
                    },
                    {
                      "value": "middle-right",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
                    },
                    {
                      "value": "bottom-left",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
                    },
                    {
                      "value": "bottom-center",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
                    },
                    {
                      "value": "bottom-right",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
                    }
                  ],
                  "default": "middle-center",
                  "label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },
                {
                  "type": "select",
                  "id": "text_alignment",
                  "options": [
                    {
                      "value": "left",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
                    },
                    {
                      "value": "center",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
                    },
                    {
                      "value": "right",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
                    }
                  ],
                  "default": "center",
                  "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
                },
                {
                  "type": "header",
                  "content": "t:sections.slideshow.settings.mobile.content"
                },
                {
                  "type": "select",
                  "id": "text_alignment_mobile",
                  "options": [
                    {
                      "value": "left",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
                    },
                    {
                      "value": "center",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
                    },
                    {
                      "value": "right",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
                    }
                  ],
                  "default": "center",
                  "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
                },







                {
                  "type": "header",
                  "content": "Slide#1"
                },
                {
                  "type": "product",
                  "id": "product_slide1",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide1",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide1",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide1",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide1",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide1",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide1",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide1",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },









                {
                  "type": "header",
                  "content": "Slide#2"
                },
                {
                  "type": "product",
                  "id": "product_slide2",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide2",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide2",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide2",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide2",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide2",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide2",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide2",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },










                {
                  "type": "header",
                  "content": "Slide#3"
                },
                {
                  "type": "product",
                  "id": "product_slide3",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide3",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide3",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide3",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide3",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide3",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide3",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide3",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },









                {
                  "type": "header",
                  "content": "Slide#4"
                },
                {
                  "type": "product",
                  "id": "product_slide4",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide4",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide4",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide4",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide4",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide4",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide4",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide4",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },








                {
                  "type": "header",
                  "content": "Slide#5"
                },
                {
                  "type": "product",
                  "id": "product_slide5",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide5",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide5",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide5",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide5",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide5",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide5",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide5",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },










                {
                  "type": "header",
                  "content": "Slide#6"
                },
                {
                  "type": "product",
                  "id": "product_slide6",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide6",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide6",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide6",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide6",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide6",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide6",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide6",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                }
            ]
        },
        {
            "type": "body-care-slideshow",
            "name": "Body care slideshow",
            "settings": [
                {
                  "type": "text",
                  "id": "heading_tab",
                  "label": "Heading Tab",
                  "default": "Tab heading"
                },
                {
                  "type": "color_scheme",
                  "id": "color_scheme",
                  "label": "t:sections.all.colors.label",
                  "default": "background-1"
                },
                {
                  "type": "select",
                  "id": "heading_size",
                  "options": [
                    {
                      "value": "h2",
                      "label": "t:sections.all.heading_size.options__1.label"
                    },
                    {
                      "value": "h1",
                      "label": "t:sections.all.heading_size.options__2.label"
                    },
                    {
                      "value": "h0",
                      "label": "t:sections.all.heading_size.options__3.label"
                    }
                  ],
                  "default": "h1",
                  "label": "t:sections.all.heading_size.label"
                },
                {
                  "type": "select",
                  "id": "text_style",
                  "options": [
                    {
                      "value": "subtitle",
                      "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
                    },
                    {
                      "value": "caption-with-letter-spacing",
                      "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
                    }
                  ],
                  "default": "caption-with-letter-spacing",
                  "label": "Tagline style"
                },
                {
                  "type": "select",
                  "id": "text_size",
                  "options": [
                    {
                      "value": "small",
                      "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
                    },
                    {
                      "value": "medium",
                      "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
                    },
                    {
                      "value": "large",
                      "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
                    }
                  ],
                  "default": "medium",
                  "label": "Tagline size"
                },
                {
                  "type": "select",
                  "id": "box_align",
                  "options": [
                    {
                      "value": "top-left",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
                    },
                    {
                      "value": "top-center",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
                    },
                    {
                      "value": "top-right",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
                    },
                    {
                      "value": "middle-left",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
                    },
                    {
                      "value": "middle-center",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
                    },
                    {
                      "value": "middle-right",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
                    },
                    {
                      "value": "bottom-left",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
                    },
                    {
                      "value": "bottom-center",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
                    },
                    {
                      "value": "bottom-right",
                      "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
                    }
                  ],
                  "default": "middle-center",
                  "label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },
                {
                  "type": "select",
                  "id": "text_alignment",
                  "options": [
                    {
                      "value": "left",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
                    },
                    {
                      "value": "center",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
                    },
                    {
                      "value": "right",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
                    }
                  ],
                  "default": "center",
                  "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
                },
                {
                  "type": "header",
                  "content": "t:sections.slideshow.settings.mobile.content"
                },
                {
                  "type": "select",
                  "id": "text_alignment_mobile",
                  "options": [
                    {
                      "value": "left",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
                    },
                    {
                      "value": "center",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
                    },
                    {
                      "value": "right",
                      "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
                    }
                  ],
                  "default": "center",
                  "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
                },







                {
                  "type": "header",
                  "content": "Slide#1"
                },
                {
                  "type": "product",
                  "id": "product_slide1",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide1",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide1",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide1",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide1",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide1",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide1",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide1",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },









                {
                  "type": "header",
                  "content": "Slide#2"
                },
                {
                  "type": "product",
                  "id": "product_slide2",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide2",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide2",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide2",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide2",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide2",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide2",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide2",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },










                {
                  "type": "header",
                  "content": "Slide#3"
                },
                {
                  "type": "product",
                  "id": "product_slide3",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide3",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide3",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide3",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide3",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide3",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide3",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide3",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },









                {
                  "type": "header",
                  "content": "Slide#4"
                },
                {
                  "type": "product",
                  "id": "product_slide4",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide4",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide4",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide4",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide4",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide4",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide4",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide4",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },








                {
                  "type": "header",
                  "content": "Slide#5"
                },
                {
                  "type": "product",
                  "id": "product_slide5",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide5",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide5",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide5",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide5",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide5",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide5",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide5",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                },










                {
                  "type": "header",
                  "content": "Slide#6"
                },
                {
                  "type": "product",
                  "id": "product_slide6",
                  "label": "t:sections.collage.blocks.product.settings.product.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "heading_slide6",
                  "default": "Image slide",
                  "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
                },
                {
                  "type": "inline_richtext",
                  "id": "subheading_slide6",
                  "default": "Tell your brand's story through images",
                  "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
                },
                {
                  "type": "text",
                  "id": "button_label_slide6",
                  "default": "Button label",
                  "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
                  "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
                },
                {
                  "type": "text",
                  "id": "caption_slide6",
                  "default": "Add a tagline",
                  "label": "Tagline"
                },
                {
                  "type": "url",
                  "id": "link_slide6",
                  "label": "t:sections.slideshow.blocks.slide.settings.link.label"
                },
                {
                  "type": "checkbox",
                  "id": "button_style_secondary_slide6",
                  "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
                  "default": false
                },
                {
                  "type": "checkbox",
                  "id": "show_text_box_slide6",
                  "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
                  "default": true
                }
            ]
        }
    ],
    "presets": [
        {
            "name": "Tab Section",
            "category": "Tab Section"
        }
    ]
}
{% endschema %}

<script >
    window.onload = function() {
        const $ = document.querySelector.bind(document);
        const $$ = document.querySelectorAll.bind(document);

        const tabs = $$('.tab-item');
        const panes = $$('.tab-pane');

        const tabActive = $('.tab-item.active')
        const line = $('.tabs .line');

        function tabLine(t) {
            line.style.left = t.offsetLeft + 'px';
            line.style.width = t.offsetWidth + 'px';
        }
        console.log(tabActive.offsetWidth, 'donny')
        // tabLine(tabActive);
        tabs.forEach((tab, index) => {
            const pane = panes[index];
            tab.onclick = function () {
                $('.tab-pane.active').classList.remove('active');
                $('.tab-item.active').classList.remove('active');

                // tabLine(this)

                pane.classList.add('active');
                this.classList.add('active')
            }
        })
    }
    
</script>
Eduard09993
New Member
5 0 0

..........

Eduard09993
New Member
5 0 0

..........

Eduard09993
New Member
5 0 0

,,,,,,,,,,