https://www.toli.co.jp/js/top-recommend.js?20260727

1/**
2 * TOP レコメンドセクション用JS
3 *
4 * - #PS-Top-Recommend1〜4 内のカルーセル（.p-rec__swiper）を Swiper で初期化
5 * - Swiper は head で読込済みのものを流用（未ロード時は何もしない）
6 * - 各カルーセルのナビ矢印はその領域内に閉じてスコープ
7 * - index.js は無改変。本ファイルで完結
8 */
9(function () {
10  'use strict';
11
12  function initTopRecommend() {
13    if (typeof Swiper === 'undefined') {
14      return; // Swiper 未ロード時はフォールバック（静的に横並び表示）
15    }
16
17    var areas = document.querySelectorAll('.p-rec__recommend');
18    Array.prototype.forEach.call(areas, function (area) {
19      var container = area.querySelector('.p-rec__swiper');
20      if (!container) return;
21
22      var nextEl = area.querySelector('.p-rec__nav--next');
23      var prevEl = area.querySelector('.p-rec__nav--prev');
24
25      // カテゴリごとの表示枚数（最後のカードが半分見切れる「呼び水」になるよう小数指定）
26      // data-spv（PC） / data-spv-md（<=1028） / data-spv-sm（<=767）を HTML 側で指定
27      var spvPc = parseFloat(area.getAttribute('data-spv')) || 4.5;
28      var spvMd = parseFloat(area.getAttribute('data-spv-md')) || (spvPc - 1);
29      var spvSm = parseFloat(area.getAttribute('data-spv-sm')) || 1.5;
30
31      // 注意: 本プロジェクトの Swiper は v4.5.0。breakpoints は「max-width」基準（既存 index.js と同様）。
32      new Swiper(container, {
33        slidesPerView: spvPc,
34        spaceBetween: 14,
35        loop: true,                 // 無限ループスライダー
36        loopAdditionalSlides: 3,    // ループ時の複製枚数（小数slidesPerViewでの表示崩れ防止）
37        grabCursor: true,           // ドラッグ操作（マウス/タッチ）
38        speed: 500,
39        watchOverflow: false,       // ループ時は常にスライド可能にする
40        navigation: {
41          nextEl: nextEl,
42          prevEl: prevEl,
43          disabledClass: 'swiper-button-disabled'
44        },
45        breakpoints: {
46          1028: {
47            slidesPerView: spvMd,
48            spaceBetween: 12
49          },
50          767: {
51            slidesPerView: spvSm,
52            spaceBetween: 10
53          }
54        }
55      });
56    });
57  }
58
59  // 施工イメージ枠: スライダー画像の右クリック保存・ドラッグ保存を抑止
60  // （枠のコンテナに委譲で登録するため、中身が動的に差し替わっても有効）
61  function initRoomImageGuard() {
62    var area = document.getElementById('PS-Top-Recommend3');
63    if (!area) return;
64    var block = function (e) {
65      var t = e.target;
66      if (t && t.tagName === 'IMG') e.preventDefault();
67    };
68    area.addEventListener('contextmenu', block);
69    area.addEventListener('dragstart', block);
70  }
71
72  function init() {
73    initTopRecommend();
74    initRoomImageGuard();
75  }
76
77  if (document.readyState === 'loading') {
78    document.addEventListener('DOMContentLoaded', init);
79  } else {
80    init();
81  }
82})();