FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

Swiperスライダーの読み込み時に一枚目の画像が一瞬表示されてしまいます。

Swiperスライダーの読み込み時に一枚目の画像が一瞬表示されてしまいます。

Snownow
観光客
26 0 2

お世話になります。

 

表題の通りですが、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;
}

どうぞ宜しくお願い致します。

0件の返信0