Liquid、JavaScriptなどに関する質問
お世話になります。
表題の通りですが、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; }
どうぞ宜しくお願い致します。
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024