shopifyのオリジナルセクションの画像部分をスライドできるようにしたい

shopifyのオリジナルセクションの画像部分をスライドできるようにしたいです。

現在、こちらのサイト (https://global.tokichi.jp/) の改修をおこなっているのですが、セクションの画像部分を添付URLのようにスライドできるよう変更したいです。
https://hiyaku.gyazo.com/63f6183b502ab6f80adf528aea3a4a75

swiperを使用して実装するとは思うのですが、具体的なコードがわからずご教示いただけますと幸いです。
文字数の都合上、schemaは省略しております。

よろしくお願いいたします。

該当のソースコード

liquid
1{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
2<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
3<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
4
5{%- style -%}
6  .section-{{ section.id }}-padding {
7    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
8    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
9  }
10
11  @media screen and (min-width: 750px) {
12    .section-{{ section.id }}-padding {
13      padding-top: {{ section.settings.padding_top }}px;
14      padding-bottom: {{ section.settings.padding_bottom }}px;
15    }
16  }
17{%- endstyle -%}
18
19{%- liquid
20  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
21  assign show_mobile_slider = false
22  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
23    assign show_mobile_slider = true
24  endif
25-%}
26
27<div class="list-top multicolumn color-{{ section.settings.color_scheme }} gradient{% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}">
28  <div class="page-width section-{{ section.id }}-padding isolate">
29    {%- unless section.settings.title == blank -%}
30      <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">
31        <h2 class="title {{ section.settings.heading_size }}">
32          {{ section.settings.title | escape }}
33        </h2>
34        {%- if section.settings.button_label != blank and show_mobile_slider -%}
35          <a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">{{ section.settings.button_label | escape }}</a>
36        {%- endif -%}
37      </div>
38    {%- endunless -%}
39    <slider-component class="slider-mobile-gutter">
40      <ul class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--mobile grid--peek{% endif %}"
41        id="Slider-{{ section.id }}"
42        role="list"
43      >
44        {%- liquid
45          assign highest_ratio = 0
46          for block in section.blocks
47            if block.settings.image.aspect_ratio > highest_ratio
48              assign highest_ratio = block.settings.image.aspect_ratio
49            endif
50          endfor
51        -%}
52        {%- for block in section.blocks -%}
53          {%- assign empty_column = '' -%}
54          {%- if block.settings.image == blank and block.settings.title == blank and block.settings.text == blank and block.settings.link_label == blank -%}
55            {%- assign empty_column = ' multicolumn-list__item--empty' -%}
56          {%- endif -%}
57
58          <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}" {{ block.shopify_attributes }}>
59          {%- if block.settings.link != blank -%}<a {% if block.settings.link == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.link }}"{% endif %}>{%- endif -%}
60            <div class="multicolumn-card content-container">
61              {%- if block.settings.image != blank -%}
62                {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
63                  {% assign spaced_image = true %}
64                {% endif %}
65                <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
66                  <div class="media media--transparent media--{{ section.settings.image_ratio }}"
67                    {% if section.settings.image_ratio == 'adapt' %}
68                      style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
69                    {% endif %}>
70                    {%- capture sizes -%}(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %}, (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %}, calc(100vw - 30px){%- endcapture -%}
71                    {{ block.settings.image | image_url: width: 1420 | image_tag:
72                      loading: 'lazy',
73                      sizes: sizes,
74                      widths: '275, 550, 710, 1420',
75                      class: 'multicolumn-card__image'
76                    }}
77                  </div></div>
78              {%- endif -%}
79              <div class="multicolumn-card__info">
80                {%- if block.settings.title != blank -%}
81                  <h3>{{ block.settings.title | escape }}</h3>
82                {%- endif -%}
83                {%- if block.settings.text != blank -%}
84                  <div class="rte">{{ block.settings.text }}</div>
85                {%- endif -%}
86              </div>
87            </div>
88                {%- if block.settings.link != blank -%}</a>{%- endif -%}
89          </li>{%- endfor -%}</ul>
90
91      {%- if show_mobile_slider -%}
92        <div class="slider-buttons no-js-hidden medium-hide">
93          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">{% render 'icon-caret' %}</button>
94          <div class="slider-counter caption">
95            <span class="slider-counter--current">1</span>
96            <span aria-hidden="true"> / </span>
97            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
98            <span class="slider-counter--total">{{ section.blocks.size }}</span>
99          </div>
100          <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>
101        </div>
102      {%- endif -%}
103    </slider-component>
104    <div class="center{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
105      {%- if section.settings.button_label != blank -%}
106        <a class="button button--primary"{% if section.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ section.settings.button_link }}"{% endif %}>
107          {{ section.settings.button_label | escape }}
108        </a>
109      {%- endif -%}
110    </div>
111  </div>
112</div>