Different images for mobile and desktop slideshow banner

[shaneleeevans]

on our https://muckbootcompany.co.uk/ site, we have a slideshow banner which currently uses the same image for desktop and mobile. I.e it resizes the image. I would like to be able to use a different image for mobile. Can anyone help with what code I need to put and where?  I have attached our slideshow.liquid below. Thank you 

<div
  data-section-id="{{ section.id }}"
  data-section-type="slideshow-section"
  data-align-top="true"
  {% if section.settings.parallax %}data-parallax="true"{% endif %}>

  {% if section.blocks.size > 0 %}
    <div class="slideshow-wrapper">
      {% if section.settings.autoplay and section.settings.style == 'bars' and section.blocks.size > 1 %}
        {% style %}
          .slick-slider[data-bars][data-autoplay="true"] .slick-dots li.slick-active button::before {
            animation-duration: {{ section.settings.autoplay_speed | times: 1000 }}ms;
          }
        {% endstyle %}

        <button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
          <span class="slideshow__pause-stop">
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-pause" viewBox="0 0 10 13"><g fill="#000" fill-rule="evenodd"><path d="M0 0h3v13H0zM7 0h3v13H7z"/></g></svg>
            <span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
          </span>
          <span class="slideshow__pause-play">
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="18.24 17.35 24.52 28.3"><path fill="#323232" d="M22.1 19.151v25.5l20.4-13.489-20.4-12.011z"/></svg>
            <span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
          </span>
        </button>
      {% endif %}

      {%- assign natural_height = false -%}
      {% if section.settings.section_height == 'natural' %}
        {% comment %}
          Get first image's aspect ratio
        {% endcomment %}
        {% for block in section.blocks limit: 1 %}
          {% if block.settings.image != blank %}
            {%- assign natural_height = true -%}
            {%- capture natural_height_ratio -%}{{ 100 | divided_by: block.settings.image.aspect_ratio }}%{% endcapture %}
          {% endif %}
        {% endfor %}
      {% endif %}

      {% if natural_height %}
        {% style %}
          .hero-natural--{{ section.id }} {
            height: 0;
            padding-bottom: {{ natural_height_ratio }};
          }
        {% endstyle %}
      {% endif %}

      {% if natural_height %}
        <div class="hero-natural--{{ section.id }}">
      {% endif %}
        <div id="Slideshow-{{ section.id }}"
          class="hero hero--{{ section.settings.section_height }} hero--{{ section.id }} hero--mobile--{{ section.settings.mobile_height }} loading loading--delayed"
          {% if natural_height %}
            data-natural="true"
          {% endif %}
          data-autoplay="{{ section.settings.autoplay }}"
          data-speed="{{ section.settings.autoplay_speed | times: 1000 }}"
          data-aos="hero__animation"
          {% if section.settings.style == 'arrows' %}
            data-arrows="true"
          {% endif %}
          {% if section.settings.style == 'dots' %}
            data-dots="true"
          {% endif %}
          {% if section.settings.style == 'bars' %}
            data-dots="true"
            data-bars="true"
          {% endif %}
          data-slide-count="{{ section.blocks.size }}">
          {% for block in section.blocks %}
            <div
              {{ block.shopify_attributes }}
              class="slideshow__slide slideshow__slide--{{ block.id }}"
              data-id="{{ block.id }}">

              {% style %}
                .slideshow__slide--{{ block.id }} .hero__title {
                  font-size: {{ block.settings.title_size | times: 0.5 }}px;
                }
                @_media only screen and (min-width: 769px) {
                  .slideshow__slide--{{ block.id }} .hero__title {
                    font-size: {{ block.settings.title_size }}px;
                  }
                }

                {% unless block.settings.color_accent contains 'rgba(0,0,0,0)' %}
                  .slideshow__slide--{{ block.id }} .btn {
                    background: {{ block.settings.color_accent }} !important;
                    border: none;

                    {%- assign accent_brightness = block.settings.color_accent | color_extract: 'lightness' -%}

                    {% if accent_brightness > 40 %}
                      color: #000 !important;
                    {% endif %}
                  }

                  {% if settings.button_style == 'angled' %}
                    .slideshow__slide--{{ block.id }} .btn:before,
                    .slideshow__slide--{{ block.id }} .btn:after {
                      background: {{ block.settings.color_accent }} !important;
                      border: none;
                    }
                  {% endif %}
                {% endunless %}
              {% endstyle %}

              {%- assign hero_text = false -%}
              {%- assign link_slide = false -%}
              {% if block.settings.top_subheading != blank or block.settings.title != blank or block.settings.subheading != blank or block.settings.link_text != blank %}
                {%- assign hero_text = true -%}
              {% endif %}
              {% if block.settings.link != blank and block.settings.link_2 == blank %}
                {%- assign link_slide = true -%}
              {% endif %}

              {% if section.settings.parallax %}
                {% if block.settings.image != blank %}
                  {% style %}
                    .hero__image--{{ block.id }} {
                      background-position: {{ block.settings.focal_point }};
                      background-size: cover;
                    }
                  {% endstyle %}
                {% endif %}
                <div class="parallax-container">
                  <div class="hero__image-wrapper">
                    <div
                      class="parallax-image hero__image hero__image--{{ block.id }}{% unless hero_text %} hero__image--no-overlay{% endunless %}{% if block.settings.image != blank %} lazyload{% else %} hero__image--svg{% endif %}"
                      {% if block.settings.image != blank %}
                        data-bgset="{% include 'bgset', image: block.settings.image %}"
                        data-sizes="auto"
                      {% endif %}>
                      {% if block.settings.image == blank %}
                        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
                      {% endif %}
                    </div>
                  </div>
                </div>
              {% else %}
                <div class="hero__image-wrapper{% unless hero_text %} hero__image-wrapper--no-overlay{% endunless %}">
                  {% if block.settings.image != blank %}
                    {% style %}
                      .hero__image--{{ block.id }} {
                        object-position: {{ block.settings.focal_point }};
                        font-family: "object-fit: cover; object-position: {{ block.settings.focal_point }};";
                      }
                    {% endstyle %}

                    {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                    <img class="image-fit hero__image hero__image--{{ block.id }} lazyload"
                      src=""
                      data-src="{{ img_url }}"
                      data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                      data-sizes="auto"
                      data-parent-fit="cover"
                      alt="{{ block.settings.image.alt | escape }}">
                    <noscript>
                      <img class="image-fit hero__image hero__image--{{ block.id }}"
                        src="{{ block.settings.image | img_url: '1400x' }}"
                        alt="{{ block.settings.image.alt | escape }}">
                    </noscript>
                  {% else %}
                    {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
                  {% endif %}
                </div>
              {% endif %}

              {% if link_slide %}
                <a href="{{ block.settings.link }}" class="hero__slide-link"></a>
              {% endif %}

              {% if hero_text %}
                <div class="hero__text-wrap">
                  <div class="page-width">
                    <div class="hero__text-content {{ block.settings.text_align }}">
                      <div class="hero__text-shadow">
                        {% unless block.settings.top_subheading == blank %}
                          <div class="hero__top-subtitle">
                            <div class="animation-cropper"><div class="animation-contents">
                              {{ block.settings.top_subheading | escape }}
                            </div></div>
                          </div>
                        {% endunless %}
                        {% unless block.settings.title == blank %}
                          <h2 class="h1 hero__title">
                            <div class="animation-cropper"><div class="animation-contents">
                            {{ block.settings.title | newline_to_br }}
                            </div></div>
                          </h2>
                        {% endunless %}
                        {% if block.settings.subheading or block.settings.link or block.settings.link_2 %}
                          {% unless block.settings.subheading == blank %}
                            <div class="hero__subtitle">
                              <div class="animation-cropper"><div class="animation-contents">
                                {{ block.settings.subheading | escape }}
                              </div></div>
                            </div>
                          {% endunless %}
                          {% if block.settings.link_text != blank or block.settings.link_text_2 != blank %}
                            <div class="hero__link">
                              {% if block.settings.link_text != blank %}
                                <a href="{{ block.settings.link }}" class="btn{% if block.settings.color_accent contains 'rgba(0,0,0,0)' %} btn--inverse{% endif %}">
                                  {{ block.settings.link_text }}
                                </a>
                              {% endif %}
                              {% if block.settings.link_text_2 != blank %}
                                <a href="{{ block.settings.link_2 }}" class="btn{% if block.settings.color_accent contains 'rgba(0,0,0,0)' %} btn--inverse{% endif %}">
                                  {{ block.settings.link_text_2 }}
                                </a>
                              {% endif %}
                            </div>
                          {% endif %}
                        {% endif %}
                      </div>
                    </div>
                  </div>
                </div>
              {% endif %}
            </div>
          {% endfor %}
        </div>
      {% if natural_height %}
        </div>
      {% endif %}
    </div>
  {% endif %}

  {% if section.blocks.size == 0 %}
    <div class="placeholder-noblocks">
      {{ 'home_page.onboarding.no_content' | t }}
    </div>
  {% endif %}
</div>

{% schema %}
  {
    "name": "Slideshow",
    "class": "index-section--hero",
    "max_blocks": 5,
    "settings": [
      {
        "type": "select",
        "id": "section_height",
        "label": "Desktop height",
        "default": "650px",
        "options": [
          {
            "label": "Natural",
            "value": "natural"
          },
          {
            "label": "450px",
            "value": "450px"
          },
          {
            "label": "550px",
            "value": "550px"
          },
          {
            "label": "650px",
            "value": "650px"
          },
          {
            "label": "750px",
            "value": "750px"
          },
          {
            "label": "Full screen",
            "value": "100vh"
          }
        ]
      },
      {
        "type": "select",
        "id": "mobile_height",
        "label": "Mobile height",
        "default": "auto",
        "info": "Not used if desktop height is set to natural",
        "options": [
          {
            "label": "Auto",
            "value": "auto"
          },
          {
            "label": "250px",
            "value": "250px"
          },
          {
            "label": "300px",
            "value": "300px"
          },
          {
            "label": "400px",
            "value": "400px"
          },
          {
            "label": "500px",
            "value": "500px"
          },
          {
            "label": "Full screen",
            "value": "100vh"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "parallax",
        "label": "Enable parallax",
        "default": true
      },
      {
        "type": "select",
        "id": "style",
        "label": "Slide navigation style",
        "default": "minimal",
        "options": [
          {
            "value": "minimal",
            "label": "Minimal"
          },
          {
            "value": "arrows",
            "label": "Arrows"
          },
          {
            "value": "bars",
            "label": "Bars"
          },
          {
            "value": "dots",
            "label": "Dots"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": "Auto-change slides",
        "default": true
      },
      {
        "type": "range",
        "id": "autoplay_speed",
        "label": "Change images every",
        "default": 7,
        "min": 5,
        "max": 10,
        "step": 1,
        "unit": "s"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Slide",
        "settings": [
          {
            "type": "text",
            "id": "top_subheading",
            "label": "Subheading"
          },
          {
            "type": "textarea",
            "id": "title",
            "label": "Heading",
            "default": "Two line\ntitle slide."
          },
          {
            "type": "range",
            "id": "title_size",
            "label": "Heading text size",
            "default": 80,
            "min": 40,
            "max": 100,
            "unit": "px"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Text",
            "default": "And optional subtext"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Slide link"
          },
          {
            "type": "text",
            "id": "link_text",
            "label": "Slide link text",
            "default": "Optional button"
          },
          {
            "type": "url",
            "id": "link_2",
            "label": "Slide link 2"
          },
          {
            "type": "text",
            "id": "link_text_2",
            "label": "Slide link text 2"
          },
          {
            "type": "color",
            "id": "color_accent",
            "label": "Buttons",
            "default": "rgba(0,0,0,0)"
          },
          {
            "type": "select",
            "id": "text_align",
            "label": "Text alignment",
            "default": "vertical-center horizontal-center",
            "options": [
              {
                "value": "vertical-center horizontal-left",
                "label": "Center left"
              },
              {
                "value": "vertical-center horizontal-center",
                "label": "Center"
              },
              {
                "value": "vertical-center horizontal-right",
                "label": "Center right"
              },
              {
                "value": "vertical-bottom horizontal-left",
                "label": "Bottom left"
              },
              {
                "value": "vertical-bottom horizontal-center",
                "label": "Bottom center"
              },
              {
                "value": "vertical-bottom horizontal-right",
                "label": "Bottom right"
              }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "select",
            "id": "focal_point",
            "label": "Image focal point",
            "info": "Used to keep the subject of your photo in view.",
            "default": "center center",
            "options": [
              {
                "value": "20% 0",
                "label": "Top left"
              },
              {
                "value": "top center",
                "label": "Top center"
              },
              {
                "value": "80% 0",
                "label": "Top right"
              },
              {
                "value": "20% 50%",
                "label": "Left"
              },
              {
                "value": "center center",
                "label": "Center"
              },
              {
                "value": "80% 50%",
                "label": "Right"
              },
              {
                "value": "20% 100%",
                "label": "Bottom left"
              },
              {
                "value": "bottom center",
                "label": "Bottom center"
              },
              {
                "value": "80% 100%",
                "label": "Bottom right"
              }
            ]
          }
        ]
      }
    ],
    "presets": [{
      "name": "Slideshow",
      "category": "Image",
      "settings": {
        "autoplay": true,
        "autoplay_speed": 5
      },
      "blocks": [
        {
          "type": "image",
          "settings": {
            "title": "Endless\npossibilities.",
            "subheading": "Bring your brand to life"
          }
        },
        {
          "type": "image",
          "settings": {
            "title": "Two line\ntitle slide.",
            "subheading": "And big, beautiful imagery"
          }
        }
      ]
    }]
  }
{% endschema %}