[
  {
    "id": 3592,
    "title": "スライダー_P-35",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M224,56v82.06l-23.72-23.72a8,8,0,0,0-11.31,0L163.31,140,113.66,90.34a8,8,0,0,0-11.32,0L64,128.69V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z\" fill=\"#9aa8c9\"/><path d=\"M216,40H72A16,16,0,0,0,56,56V72H40A16,16,0,0,0,24,88V200a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V184h16a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM72,56H216v62.75l-10.07-10.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L72,109.37ZM184,200H40V88H56v80a16,16,0,0,0,16,16H184Zm32-32H72V132l36-36,49.66,49.66a8,8,0,0,0,11.31,0L194.63,120,216,141.38V168ZM160,84a12,12,0,1,1,12,12A12,12,0,0,1,160,84Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "スライダー",
      "slider",
      "カルーセル",
      "サムネイル",
      "メディア・ビジュアル"
    ],
    "slug": "lazyblock/f-slider-pro",
    "description": "画像を切り替えて表示するスライダーブロックです。中央に大きく表示し、左右に前後のスライドが少し見えるデザインです。スマホでのスワイプ操作、ホバー時の自動再生停止、サムネイルからの選択に対応しています。",
    "category": "Lazyblocks Pro",
    "category_label": "Lazyblocks Pro",
    "supports": {
      "customClassName": true,
      "anchor": false,
      "html": false,
      "multiple": true,
      "inserter": true,
      "reusable": true,
      "color": false,
      "layout": false,
      "shadow": false,
      "spacing": false,
      "dimensions": false,
      "typography": false,
      "lock": true,
      "align": [],
      "ghostkit": {
        "effects": false,
        "position": false,
        "spacings": false,
        "frame": false,
        "transform": false,
        "customCSS": false,
        "display": false,
        "attributes": false
      }
    },
    "controls": {
      "control_2ab75ae576": {
        "type": "repeater",
        "name": "slide_list",
        "default": "",
        "label": "スライド一覧",
        "help": "「＋スライドを追加」から、表示する画像を追加してください。",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "rows_min": "1",
        "rows_max": "",
        "rows_label": "スライド",
        "rows_add_button_label": "スライドを追加",
        "rows_collapsible": "true",
        "rows_collapsed": "false"
      },
      "control_44f260ac4c": {
        "type": "image",
        "name": "slide_image",
        "default": "",
        "label": "画像",
        "help": "",
        "child_of": "control_2ab75ae576",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "insert_from_url": "false",
        "preview_size": "medium"
      },
      "control_545e3c467a": {
        "type": "text",
        "name": "slide_caption",
        "default": "",
        "label": "キャプション（任意）",
        "help": "",
        "child_of": "control_2ab75ae576",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "画像の下に表示する説明文",
        "characters_limit": ""
      },
      "control_6b6c5a33a1": {
        "type": "link",
        "name": "slide_link",
        "default": "",
        "label": "リンク先（任意）",
        "help": "設定するとスライド画像がクリック可能になります。",
        "child_of": "control_2ab75ae576",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "link_suggestions": "Automatic",
        "show_initial_link_suggestions": "true",
        "rich_preview": "false",
        "show_title_field": "false",
        "show_target_field": "true",
        "show_nofollow_field": "true",
        "show_classes_field": "false"
      },
      "control_a0f4b4b93a": {
        "type": "panel",
        "name": "",
        "default": "",
        "label": "自動再生",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\" fill=\"#dbea88\"><path d=\"M224,56v82.06l-23.72-23.72a8,8,0,0,0-11.31,0L163.31,140,113.66,90.34a8,8,0,0,0-11.32,0L64,128.69V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z\" opacity=\"0.2\"/><path d=\"M216,40H72A16,16,0,0,0,56,56V72H40A16,16,0,0,0,24,88V200a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V184h16a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM72,56H216v62.75l-10.07-10.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L72,109.37ZM184,200H40V88H56v80a16,16,0,0,0,16,16H184Zm32-32H72V132l36-36,49.66,49.66a8,8,0,0,0,11.31,0L194.63,120,216,141.38V168ZM160,84a12,12,0,1,1,12,12A12,12,0,0,1,160,84Z\"/></svg>",
        "initial_open": "true",
        "endpoint": "false"
      },
      "control_57e8c73971": {
        "type": "toggle",
        "name": "slider_autoplay",
        "default": "true",
        "label": "自動再生する",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_b820d6462a": {
        "type": "number",
        "name": "slider_interval",
        "default": 5,
        "label": "切り替え間隔（秒）",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "min": 1,
        "max": 60,
        "step": 1
      },
      "control_582eab5ac2": {
        "type": "toggle",
        "name": "slider_pause_on_hover",
        "default": "true",
        "label": "ホバー中は一時停止する",
        "help": "マウスが乗っている間、自動再生を止めます。",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_768c1a5565": {
        "type": "panel",
        "name": "",
        "default": "",
        "label": "見た目・操作性",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\" fill=\"#dbea88\"><path d=\"M224,56v82.06l-23.72-23.72a8,8,0,0,0-11.31,0L163.31,140,113.66,90.34a8,8,0,0,0-11.32,0L64,128.69V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z\" opacity=\"0.2\"/><path d=\"M216,40H72A16,16,0,0,0,56,56V72H40A16,16,0,0,0,24,88V200a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V184h16a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM72,56H216v62.75l-10.07-10.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L72,109.37ZM184,200H40V88H56v80a16,16,0,0,0,16,16H184Zm32-32H72V132l36-36,49.66,49.66a8,8,0,0,0,11.31,0L194.63,120,216,141.38V168ZM160,84a12,12,0,1,1,12,12A12,12,0,0,1,160,84Z\"/></svg>",
        "initial_open": "false",
        "endpoint": "false"
      },
      "control_7809180b22": {
        "type": "toggle",
        "name": "slider_swipe",
        "default": "true",
        "label": "スマホのスワイプ操作を有効化",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_c935cb8ad5": {
        "type": "toggle",
        "name": "slider_show_thumbnails",
        "default": "true",
        "label": "スライド下にサムネイル一覧を表示",
        "help": "オンの場合、スライドの下に全画像のサムネイルが並び、クリックでそのスライドに切り替えられます。",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      }
    },
    "code": {
      "output_method": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php\r\nif ( ! empty( $attributes['slide_list'] ) && is_array( $attributes['slide_list'] ) ) :\r\n\t$slides      = $attributes['slide_list'];\r\n\t$autoplay    = ! empty( $attributes['slider_autoplay'] );\r\n\t$interval    = ! empty( $attributes['slider_interval'] ) ? (int) $attributes['slider_interval'] : 5;\r\n\t$pause_hover = ! empty( $attributes['slider_pause_on_hover'] );\r\n\t$swipe       = ! empty( $attributes['slider_swipe'] );\r\n\t$show_thumbs = ! empty( $attributes['slider_show_thumbnails'] );\r\n\t$uid         = 'slider-' . substr( md5( serialize( $slides ) ), 0, 8 );\r\n\r\n\t$slide_data = array();\r\n\tforeach ( $slides as $slide ) {\r\n\t\t$img_url = '';\r\n\t\tif ( ! empty( $slide['slide_image'] ) ) {\r\n\t\t\t$img_url = is_array( $slide['slide_image'] ) ? ( $slide['slide_image']['url'] ?? '' ) : $slide['slide_image'];\r\n\t\t}\r\n\t\t$link = $slide['slide_link'] ?? array();\r\n\t\t$slide_data[] = array(\r\n\t\t\t'img'      => $img_url,\r\n\t\t\t'caption'  => $slide['slide_caption'] ?? '',\r\n\t\t\t'link_url' => is_array( $link ) ? ( $link['url'] ?? '' ) : '',\r\n\t\t\t'new_tab'  => is_array( $link ) ? ! empty( $link['opensInNewTab'] ) : false,\r\n\t\t\t'nofollow' => is_array( $link ) ? ! empty( $link['nofollow'] ) : false,\r\n\t\t);\r\n\t}\r\n\t$slide_count = count( $slide_data );\r\n\t$show_peek   = $slide_count >= 3;\r\n\t$peek_prev_i = $slide_count > 0 ? ( $slide_count - 1 ) % $slide_count : 0;\r\n\t$peek_next_i = $slide_count > 0 ? 1 % $slide_count : 0;\r\n?>\r\n<div class=\"slider-block\" id=\"<?php echo esc_attr( $uid ); ?>\"\r\n\tdata-autoplay=\"<?php echo $autoplay ? '1' : '0'; ?>\"\r\n\tdata-interval=\"<?php echo esc_attr( $interval * 1000 ); ?>\"\r\n\tdata-pause-hover=\"<?php echo $pause_hover ? '1' : '0'; ?>\"\r\n\tdata-swipe=\"<?php echo $swipe ? '1' : '0'; ?>\">\r\n\r\n\t<div class=\"slider-viewport<?php echo $show_peek ? '' : ' slider-no-peek'; ?>\">\r\n\t\t<?php if ( $show_peek ) : ?>\r\n\t\t<button type=\"button\" class=\"slider-peek slider-peek-prev\" aria-label=\"前のスライドへ\">\r\n\t\t\t<img src=\"<?php echo esc_url( $slide_data[ $peek_prev_i ]['img'] ); ?>\" alt=\"\" loading=\"lazy\">\r\n\t\t</button>\r\n\t\t<?php endif; ?>\r\n\r\n\t\t<div class=\"slider-center\">\r\n\t\t\t<div class=\"slider-track\">\r\n\t\t\t\t<?php foreach ( $slide_data as $i => $sd ) : ?>\r\n\t\t\t\t\t<div class=\"slider-slide<?php echo 0 === $i ? ' is-active' : ''; ?>\">\r\n\t\t\t\t\t\t<?php if ( $sd['link_url'] ) : ?>\r\n\t\t\t\t\t\t<a href=\"<?php echo esc_url( $sd['link_url'] ); ?>\"<?php echo $sd['new_tab'] ? ' target=\"_blank\" rel=\"noopener' . ( $sd['nofollow'] ? ' nofollow' : '' ) . '\"' : ''; ?>>\r\n\t\t\t\t\t\t<?php endif; ?>\r\n\t\t\t\t\t\t<?php if ( $sd['img'] ) : ?>\r\n\t\t\t\t\t\t\t<img src=\"<?php echo esc_url( $sd['img'] ); ?>\" alt=\"<?php echo esc_attr( $sd['caption'] ); ?>\" loading=\"lazy\">\r\n\t\t\t\t\t\t<?php endif; ?>\r\n\t\t\t\t\t\t<?php if ( $sd['link_url'] ) : ?>\r\n\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t<?php endif; ?>\r\n\t\t\t\t\t\t<?php if ( $sd['caption'] ) : ?>\r\n\t\t\t\t\t\t\t<p class=\"slider-caption\"><?php echo esc_html( $sd['caption'] ); ?></p>\r\n\t\t\t\t\t\t<?php endif; ?>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t<?php endforeach; ?>\r\n\t\t\t</div>\r\n\r\n\t\t\t<button type=\"button\" class=\"slider-arrow slider-prev\" aria-label=\"前へ\">\r\n\t\t\t\t<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 6l-6 6 6 6\"/></svg>\r\n\t\t\t</button>\r\n\t\t\t<button type=\"button\" class=\"slider-arrow slider-next\" aria-label=\"次へ\">\r\n\t\t\t\t<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"/></svg>\r\n\t\t\t</button>\r\n\r\n\t\t\t<?php if ( ! $show_thumbs ) : ?>\r\n\t\t\t<div class=\"slider-dots\">\r\n\t\t\t\t<?php foreach ( $slide_data as $i => $sd ) : ?>\r\n\t\t\t\t\t<button type=\"button\" class=\"slider-dot<?php echo 0 === $i ? ' is-active' : ''; ?>\" data-slide-index=\"<?php echo esc_attr( $i ); ?>\" aria-label=\"<?php echo esc_attr( sprintf( 'スライド%d', $i + 1 ) ); ?>\"></button>\r\n\t\t\t\t<?php endforeach; ?>\r\n\t\t\t</div>\r\n\t\t\t<?php endif; ?>\r\n\t\t</div>\r\n\r\n\t\t<?php if ( $show_peek ) : ?>\r\n\t\t<button type=\"button\" class=\"slider-peek slider-peek-next\" aria-label=\"次のスライドへ\">\r\n\t\t\t<img src=\"<?php echo esc_url( $slide_data[ $peek_next_i ]['img'] ); ?>\" alt=\"\" loading=\"lazy\">\r\n\t\t</button>\r\n\t\t<?php endif; ?>\r\n\t</div>\r\n\r\n\t<?php if ( $show_thumbs && $slide_count > 1 ) : ?>\r\n\t<div class=\"slider-thumbs\" role=\"group\" aria-label=\"スライドを選択\">\r\n\t\t<?php foreach ( $slide_data as $i => $sd ) : ?>\r\n\t\t\t<button type=\"button\"\r\n\t\t\t\tclass=\"slider-thumb<?php echo 0 === $i ? ' is-active' : ''; ?>\"\r\n\t\t\t\tdata-slide-index=\"<?php echo esc_attr( $i ); ?>\"\r\n\t\t\t\taria-label=\"<?php echo esc_attr( sprintf( 'スライド%d に移動', $i + 1 ) ); ?>\"\r\n\t\t\t\t<?php echo 0 === $i ? 'aria-current=\"true\"' : ''; ?>>\r\n\t\t\t\t<?php if ( $sd['img'] ) : ?>\r\n\t\t\t\t\t<img src=\"<?php echo esc_url( $sd['img'] ); ?>\" alt=\"\" loading=\"lazy\">\r\n\t\t\t\t<?php endif; ?>\r\n\t\t\t</button>\r\n\t\t<?php endforeach; ?>\r\n\t</div>\r\n\t<?php endif; ?>\r\n</div>\r\n<?php endif; ?>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "<style>\r\n.slider-block, .slider-block * { box-sizing: border-box; }\r\n.slider-block { position: relative; width: 100%; max-width: 780px; margin: 24px 0; }\r\n\r\n/* Grid blowout対策 */\r\n.slider-viewport {\r\n\tposition: relative; display: grid;\r\n\tgrid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);\r\n\tgap: 8px; align-items: stretch; width: 100%;\r\n}\r\n.slider-viewport.slider-no-peek { grid-template-columns: minmax(0, 1fr); }\r\n\r\n.slider-peek {\r\n\tposition: relative; min-width: 0; padding: 0; border: none; cursor: pointer;\r\n\tborder-radius: 10px; overflow: hidden; background: #0d111a;\r\n\taspect-ratio: 16/9; opacity: 0.55; transition: opacity 0.2s ease;\r\n}\r\n.slider-peek:hover { opacity: 0.85; }\r\n.slider-peek img { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n\r\n/* 背景色を追加して、比率の違う画像の余白を綺麗に見せる */\r\n.slider-center { position: relative; min-width: 0; border-radius: 10px; overflow: hidden; background: #0d111a; }\r\n.slider-track { position: relative; aspect-ratio: 16/9; }\r\n.slider-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }\r\n.slider-slide.is-active { opacity: 1; pointer-events: auto; }\r\n.slider-slide a { display: block; width: 100%; height: 100%; }\r\n\r\n/* 切り抜かれないように object-fit: contain; に変更 */\r\n.slider-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }\r\n\r\n.slider-caption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(17,22,34,0.75); color: #fff; font-size: 13px; padding: 10px 16px; margin: 0 !important; }\r\n\r\n.slider-arrow {\r\n\tposition: absolute; top: 50%; transform: translateY(-50%);\r\n\twidth: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; z-index: 3;\r\n\tbackground: rgba(17,22,34,0.65); color: #fff;\r\n\tdisplay: flex; align-items: center; justify-content: center;\r\n}\r\n.slider-arrow svg { display: block; }\r\n.slider-prev { left: 12px; }\r\n.slider-next { right: 12px; }\r\n\r\n.slider-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }\r\n.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; }\r\n.slider-dot.is-active { background: #00d2d3; }\r\n\r\n.slider-thumbs {\r\n\tdisplay: flex; gap: 10px; margin-top: 12px; width: 100%;\r\n\toverflow-x: auto; -webkit-overflow-scrolling: touch;\r\n\tpadding: 2px 2px 6px;\r\n}\r\n.slider-thumb {\r\n\tflex: 0 0 auto; width: 84px; height: 56px; padding: 0;\r\n\tborder: 2px solid transparent; border-radius: 8px; overflow: hidden;\r\n\tbackground: none; cursor: pointer; opacity: 0.7;\r\n\ttransition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;\r\n\tbox-shadow: 0 1px 3px rgba(0,0,0,0.15);\r\n}\r\n.slider-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n.slider-thumb:hover { opacity: 0.9; }\r\n.slider-thumb.is-active { opacity: 1; border-color: #00d2d3; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }\r\n\r\n@media (max-width: 680px) {\r\n\t.slider-viewport { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); gap: 6px; }\r\n\t.slider-arrow { width: 30px; height: 30px; }\r\n\t.slider-arrow svg { width: 15px; height: 15px; }\r\n\t.slider-thumb { width: 68px; height: 46px; }\r\n}\r\n@media (max-width: 480px) {\r\n\t.slider-viewport { grid-template-columns: minmax(0, 1fr); }\r\n\t.slider-peek { display: none; }\r\n\t.slider-caption { font-size: 12px; padding: 8px 12px; }\r\n\t.slider-thumbs { gap: 8px; }\r\n\t.slider-thumb { width: 56px; height: 38px; border-width: 1.5px; }\r\n}\r\n</style>",
      "editor": ""
    },
    "script": {
      "view": "<script>\r\ndocument.querySelectorAll('.slider-block').forEach(function (block) {\r\n\tif (block.dataset.bound) return;\r\n\tblock.dataset.bound = 'true';\r\n\r\n\tvar slides   = block.querySelectorAll('.slider-slide');\r\n\tvar dots     = block.querySelectorAll('.slider-dot');\r\n\tvar thumbs   = block.querySelectorAll('.slider-thumb');\r\n\tvar peekPrev = block.querySelector('.slider-peek-prev img');\r\n\tvar peekNext = block.querySelector('.slider-peek-next img');\r\n\tvar current  = 0;\r\n\tvar timer    = null;\r\n\tvar autoplay     = block.dataset.autoplay === '1';\r\n\tvar interval     = parseInt(block.dataset.interval, 10) || 5000;\r\n\tvar pauseHover   = block.dataset.pauseHover === '1';\r\n\tvar swipeEnabled = block.dataset.swipe === '1';\r\n\r\n\tvar slideSrcs = [];\r\n\tslides.forEach(function (s) {\r\n\t\tvar img = s.querySelector('img');\r\n\t\tslideSrcs.push(img ? img.getAttribute('src') : '');\r\n\t});\r\n\r\n\tfunction render() {\r\n\t\tslides.forEach(function (s, i) { s.classList.toggle('is-active', i === current); });\r\n\t\tdots.forEach(function (d, i) { d.classList.toggle('is-active', i === current); });\r\n\t\tthumbs.forEach(function (t, i) {\r\n\t\t\tvar active = i === current;\r\n\t\t\tt.classList.toggle('is-active', active);\r\n\t\t\tif (active) {\r\n\t\t\t\tt.setAttribute('aria-current', 'true');\r\n\t\t\t\t// サムネイルコンテナ内だけで横スクロールさせる（ページ全体のスクロールジャンプ防止策）\r\n\t\t\t\tvar container = t.parentElement;\r\n\t\t\t\tif (container) {\r\n\t\t\t\t\tvar scrollLeft = container.scrollLeft;\r\n\t\t\t\t\tvar clientWidth = container.clientWidth;\r\n\t\t\t\t\tvar left = t.offsetLeft;\r\n\t\t\t\t\tvar width = t.offsetWidth;\r\n\t\t\t\t\tif (left < scrollLeft || left + width > scrollLeft + clientWidth) {\r\n\t\t\t\t\t\tcontainer.scrollTo({ left: left - clientWidth / 2 + width / 2, behavior: 'smooth' });\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tt.removeAttribute('aria-current');\r\n\t\t\t}\r\n\t\t});\r\n\t\tif (peekPrev && slideSrcs.length) {\r\n\t\t\tpeekPrev.setAttribute('src', slideSrcs[(current - 1 + slideSrcs.length) % slideSrcs.length]);\r\n\t\t}\r\n\t\tif (peekNext && slideSrcs.length) {\r\n\t\t\tpeekNext.setAttribute('src', slideSrcs[(current + 1) % slideSrcs.length]);\r\n\t\t}\r\n\t}\r\n\r\n\tfunction goTo(index) {\r\n\t\tcurrent = (index + slides.length) % slides.length;\r\n\t\trender();\r\n\t}\r\n\r\n\tfunction resetTimer() {\r\n\t\tif (timer) clearInterval(timer);\r\n\t\tif (autoplay) {\r\n\t\t\ttimer = setInterval(function () { goTo(current + 1); }, interval);\r\n\t\t}\r\n\t}\r\n\r\n\tvar prevBtn = block.querySelector('.slider-prev');\r\n\tvar nextBtn = block.querySelector('.slider-next');\r\n\tvar peekPrevBtn = block.querySelector('.slider-peek-prev');\r\n\tvar peekNextBtn = block.querySelector('.slider-peek-next');\r\n\tif (prevBtn) prevBtn.addEventListener('click', function () { goTo(current - 1); resetTimer(); });\r\n\tif (nextBtn) nextBtn.addEventListener('click', function () { goTo(current + 1); resetTimer(); });\r\n\tif (peekPrevBtn) peekPrevBtn.addEventListener('click', function () { goTo(current - 1); resetTimer(); });\r\n\tif (peekNextBtn) peekNextBtn.addEventListener('click', function () { goTo(current + 1); resetTimer(); });\r\n\tdots.forEach(function (dot) {\r\n\t\tdot.addEventListener('click', function () { goTo(parseInt(dot.dataset.slideIndex, 10)); resetTimer(); });\r\n\t});\r\n\tthumbs.forEach(function (thumb) {\r\n\t\tthumb.addEventListener('click', function () { goTo(parseInt(thumb.dataset.slideIndex, 10)); resetTimer(); });\r\n\t});\r\n\r\n\tif (pauseHover) {\r\n\t\tblock.addEventListener('mouseenter', function () { if (timer) clearInterval(timer); });\r\n\t\tblock.addEventListener('mouseleave', function () { resetTimer(); });\r\n\t}\r\n\r\n\tif (swipeEnabled) {\r\n\t\tvar startX = 0, deltaX = 0, touching = false;\r\n\t\tvar centerEl = block.querySelector('.slider-center');\r\n\t\tcenterEl.addEventListener('touchstart', function (e) {\r\n\t\t\ttouching = true;\r\n\t\t\tstartX = e.touches[0].clientX;\r\n\t\t}, { passive: true });\r\n\t\tcenterEl.addEventListener('touchmove', function (e) {\r\n\t\t\tif (!touching) return;\r\n\t\t\tdeltaX = e.touches[0].clientX - startX;\r\n\t\t}, { passive: true });\r\n\t\tcenterEl.addEventListener('touchend', function () {\r\n\t\t\tif (!touching) return;\r\n\t\t\ttouching = false;\r\n\t\t\tif (Math.abs(deltaX) > 40) {\r\n\t\t\t\tif (deltaX < 0) { goTo(current + 1); } else { goTo(current - 1); }\r\n\t\t\t\tresetTimer();\r\n\t\t\t}\r\n\t\t\tdeltaX = 0;\r\n\t\t});\r\n\t}\r\n\r\n\tvar inEditor = document.body.classList.contains('block-editor-iframe__body') ||\r\n\t\tdocument.body.classList.contains('editor-styles-wrapper') ||\r\n\t\tdocument.body.classList.contains('wp-admin');\r\n\tif (inEditor) {\r\n\t\tblock.querySelectorAll('a[href]').forEach(function (a) {\r\n\t\t\ta.addEventListener('click', function (e) { e.preventDefault(); });\r\n\t\t});\r\n\t}\r\n\trender();\r\n\tresetTimer();\r\n});\r\n</script>"
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]