お世話になります。
表題の通りですが、Swiperスライダーの読み込み時に一枚目の画像が一瞬表示されてしまいます。
また、スライダー画像の表示サイズの変更が上手く反応しません。
(一枚目の画像には、サイズが適応されるが、スライダー再生に入るとサイズ変更が適応されません。)
どなたが、お助け下さいませ 
コードは以下の通りです。
[Liquid]
{{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}
{{ 'carousel-slider.css' | asset_url | stylesheet_tag }}
<script src="{{ 'swiper-bundle.min.js' | asset_url }}" defer></script>
{%- liquid
assign image_width = 1500 | divided_by: section.settings.banner_rows
assign show_arrows = section.settings.show_arrows
assign show_pagination = section.settings.show_pagination
assign bunner_rate = section.settings.bunner_rate
assign center_mode = section.settings.center_mode
if center_mode
assign banner_rows = section.settings.banner_rows | plus: 0.5
assign mobile_rows = 1.5
else
assign banner_rows = section.settings.banner_rows
assign mobile_rows = 1
endif
if bunner_rate != blank
style
echo '#carousel-section_id .banner-link { aspect-ratio: bunner_rate; }' | replace: 'section_id', section.id | replace: 'bunner_rate', bunner_rate
endstyle
else
assign banner_image_width = section.blocks[0].settings.banner_image.width
assign banner_image_height = section.blocks[0].settings.banner_image.height
style
echo '#carousel-section_id .banner-link { aspect-ratio: banner_image_width/banner_image_height; }' | replace: 'section_id', section.id | replace: 'banner_image_width', banner_image_width | replace: 'banner_image_height', banner_image_height
endstyle
endif
-%}
<div class="{% unless section.settings.full_width %}page-width{% endunless %}">
<div id="carousel-{{ section.id }}" class="swiper">
<div class="swiper-wrapper">
{%- for block in section.blocks -%}
{%- liquid
assign banner_image = block.settings.banner_image
assign banner_aspect_ratio = banner_image.aspect_ratio
assign banner_width_2x = image_width | times: 2
assign banner_height = image_width | divided_by: banner_aspect_ratio | floor
assign banner_link = block.settings.banner_link
-%}
<div class="swiper-slide">
{%- liquid
if banner_image != blank
echo banner_image | image_url: width: banner_width_2x | image_tag: width: image_width, height: banner_height, class: 'banner-image', loading: 'lazy' | link_to: banner_link, class: 'banner-link'
else
if forloop.index > 3
assign placeholder_svg_tag_name = 'hero-apparel-3'
else
assign placeholder_svg_tag_name = 'hero-apparel-' | append: forloop.index
endif
echo placeholder_svg_tag_name | placeholder_svg_tag: 'banner-image' | link_to: '#', class: 'banner-link'
endif
-%}
</div>
{%- endfor -%}
</div>
{%- if show_arrows -%}
<button type="button" class="swiper-button-prev" name="戻る"></button>
<button type="button" class="swiper-button-next" name="進む"></button>
{%- endif -%}
{%- if show_pagination -%}
<div class="swiper-pagination">
{%- endif -%}
</div>
</div>
<script>
window.addEventListener('load', function () {
const swiper = new Swiper('#carousel-{{ section.id }}', {
loop: true,
slidesPerView: {{ mobile_rows }},
speed: {{ section.settings.banner_speed }},
spaceBetween: {{ section.settings.banner_padding }},
{%- if center_mode %}
centeredSlides: true,
{% endif -%}
breakpoints: {
560: {
slidesPerView: {{ banner_rows }},
},
},
{%- if show_arrows %}
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
{% endif -%}
{%- if show_pagination %}
pagination: {
el: ".swiper-pagination"
},
{% endif -%}
autoplay: {
delay: {{ section.settings.banner_delay }},
}
});
});
</script>
{% schema %}
{
"name": "カルーセルスライダー",
"class": "carousel-slider",
"tag": "section",
"settings": [
{
"type": "range",
"id": "banner_rows",
"min": 1,
"max": 5,
"step": 1,
"unit": "枚",
"label": "デスクトップの表示数",
"default": 3,
"info": "モバイルでは1枚"
},
{
"type": "range",
"id": "banner_padding",
"min": 0,
"max": 30,
"step": 5,
"unit": "px",
"label": "バナー間の余白",
"default": 15
},
{
"type": "range",
"id": "banner_speed",
"min": 0,
"max": 5000,
"step": 100,
"unit": "ミリ秒",
"label": "アニメーションスピード",
"default": 300
},
{
"type": "range",
"id": "banner_delay",
"min": 0,
"max": 5000,
"step": 500,
"unit": "ミリ秒",
"label": "切り替えスピード",
"default": 3000
},
{
"type": "checkbox",
"id": "show_arrows",
"label": "ナビゲーションを表示",
"default": true
},
{
"type": "checkbox",
"id": "show_pagination",
"label": "ページネーションを表示",
"default": true
},
{
"type": "checkbox",
"id": "center_mode",
"label": "センターモード",
"default": true,
"info": "アクティブなスライドが中央に配置されます。"
},
{
"type": "text",
"id": "bunner_rate",
"label": "バナーのアスペクト比",
"default": "16/9",
"info": "空欄で最初の画像に比率を合わせます。"
},
{
"type": "checkbox",
"id": "full_width",
"label": "全幅",
"default": true
}
],
"blocks": [
{
"type": "banner",
"name": "バナー",
"settings": [
{
"type": "image_picker",
"id": "banner_image",
"label": "バナー画像"
},
{
"type": "url",
"id": "banner_link",
"label": "バナーリンク"
}
]
}
],
"presets": [
{
"name": "カルーセルスライダー",
"blocks": ["banner", "banner", "banner"]
}
]
}
{% endschema %}
[CSS]
.carousel-slider button[class^="swiper-button"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: none;
outline: none;
background: none;
}
.carousel-slider .banner-link {
display: block;
}
.carousel-slider .banner-image {
width: 100%;
height: 100%;
object-fit: cover;
}
どうぞ宜しくお願い致します。