Slideshow Banner - Cascade Theme

SuraSB
Excursionist
13 0 2

Hello. I have Cascade Theme and i'm trying to setup slideshow banner section which this theme doesn't have. Instead it has slideshow for images with text and links. 

Here is blocks from the schema of the header which they have:

    "blocks": [
      {
        "type": "banner",
        "name": "Banner image",
        "limit": 1,
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "1250x1400px recommended"
          },
          {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Image - mobile (optional)",
            "info": "800x1000px recommended."
          },
          {
            "type": "select",
            "id": "image_style",
            "label": "Image style:",
            "options": [
              {
                "value": "full_screen",
                "label": "Full Screen"
              },
              {
                "value": "fit_content",
                "label": "Content"
              }
            ],
            "info": "Use \'Content\' style to avoid image cropping."
          },
          {
            "type": "select",
            "id": "overlay_text_color",
            "label": "Text color",
            "info": "Override header text color for the home page when banner image is enabled.",
            "options": [
              { "value": "primary", "label": "Primary text"},
              { "value": "secondary", "label": "Secondary text"},
              { "value": "tertiary", "label": "Tertiary text"},
              { "value": "white", "label": "White"},
              { "value": "black", "label": "Black"}
            ]
          },
          {
            "type": "image_picker",
            "id": "logo_alternate",
            "label": "Logo image",
            "info": "Alternate logo for the banner image"
          },
          {
            "type": "header",
            "content": "Content"
          },
          {
            "type": "text",
            "id": "heading",
            "label": "Heading"
          },
          {
            "type": "url",
            "id": "cta_url",
            "label": "Button link"
          },
          {
            "type": "text",
            "id": "cta_text",
            "label": "Button text",
            "default": "Shop Now"
          },
          {
            "type": "select",
            "id": "content_position",
            "label": "Content position",
            "options": [
              {
                "value": "text-align--left align--middle",
                "label": "Middle Left"
              },
              {
                "value": "text-align--center align--middle",
                "label": "Middle Center"
              },
              {
                "value": "text-align--right align--middle",
                "label": "Middle Right"
              },
              {
                "value": "text-align--left align--bottom",
                "label": "Bottom Left"
              },
              {
                "value": "text-align--center align--bottom",
                "label": "Bottom Center"
              },
              {
                "value": "text-align--right align--bottom",
                "label": "Bottom Right"
              }
            ],
            "default":   "text-align--center align--middle"
          },
          {
            "type": "select",
            "id": "text_align",
            "label": "Text alignment",
            "options": [
              {
                "value": "text-align--left",
                "label": "Left"
              },
              {
                "value": "text-align--center",
                "label": "Center"
              },
              {
                "value": "text-align--right",
                "label": "Right"
              }
            ],
            "default":   "text-align--left"
          }
        ]
      }
    ]

 
You can see that there is limit for 1 image, but if you change limit to 2 or 3 images and add images in Customization, those images will be just shown on top of each other.
"type": "banner",
"name": "Banner image",
"limit": 1

Here is banner from the header section:

<div id="{{ wrapper_id }}" class="js banner_image banner_image--desktop absolute top--0 left--0 full--w {% if block.settings.image_mobile %}md--dn--hide{% endif %}" {{ block.shopify_attributes }}
          data-desktop-banner-image>
     <div class="lazyload bg-cover"
              data-bgset="{% render 'bgset', image: feature_image %}"
              data-sizes="auto"
              data-parent-fit="cover"
              style="padding-top:{{ padding }}; background-image: url({{ feature_image | img_url: '300x300' }}); background-size: cover;">                                                                                                                          
      </div>
</div>



Does someone knows how can i add responsive slideshow to the banner?

thank you.

Thanks,
Sura Baghirova
Reply 1 (1)
Campionk
Excursionist
26 0 3

@SuraSB 

Did you ever solve this?