app/template/default/Block/slider.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  12. {% set sliders = get_sliders() %}
  13. {% if sliders|length > 0 %}
  14. <style>
  15.     /* スライダーコンテナ */
  16.     .custom-slider {
  17.         position: relative;
  18.         width: 100%;
  19.         overflow: hidden;
  20.         background-color: #ffffff;
  21.     }
  23.     @media (max-width: 767px) {
  24.         .custom-slider {
  25.             padding: 0 20px;
  26.         }
  27.     }
  29.     /* スライダーラッパー */
  30.     .custom-slider__wrapper {
  31.         position: relative;
  32.         width: 100%;
  33.         overflow: hidden;
  34.     }
  36.     /* スライダートラック */
  37.     .custom-slider__track {
  38.         display: flex;
  39.         transition: transform 0.5s ease-in-out;
  40.         height: 100%;
  41.     }
  43.     /* トランジション無効化用 */
  44.     .custom-slider__track.no-transition {
  45.         transition: none;
  46.     }
  48.     /* スライドアイテム */
  49.     .custom-slider__item {
  50.         flex-shrink: 0;
  51.         width: 80%;
  52.         margin: 0 2%;
  53.         aspect-ratio: 16 / 9;
  54.         height: auto;
  55.         position: relative;
  56.     }
  58.     /* デスクトップ: 3カラム表示 */
  59.     @media (min-width: 768px) {
  60.         .custom-slider__item {
  61.             width: 50%;
  62.             min-width: 700px;
  63.             margin: 0 1%;
  64.             opacity: 0.5;
  65.             transition: opacity 0.5s ease, transform 0.5s ease;
  66.         }
  68.         /* 中央のアクティブスライド */
  69.         .custom-slider__item.is-active {
  70.             opacity: 1;
  71.             z-index: 2;
  72.         }
  73.     }
  75.     /* リンク */
  76.     .custom-slider__link {
  77.         display: block;
  78.         width: 100%;
  79.         height: 100%;
  80.         text-decoration: none;
  81.         color: inherit;
  82.     }
  84.     /* 画像 */
  85.     .custom-slider__image {
  86.         width: 100%;
  87.         height: 100%;
  88.         aspect-ratio: 16 / 9;
  89.         object-fit: cover;
  90.     }
  92.     /* ナビゲーションボタン */
  93.     .custom-slider__nav {
  94.         position: absolute;
  95.         top: 50%;
  96.         transform: translateY(-50%);
  97.         background-color: rgba(255, 255, 255, 0.9);
  98.         border: none;
  99.         width: 40px;
  100.         height: 40px;
  101.         border-radius: 50%;
  102.         cursor: pointer;
  103.         z-index: 10;
  104.         display: flex;
  105.         align-items: center;
  106.         justify-content: center;
  107.         transition: background-color 0.3s ease, transform 0.2s ease;
  108.         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  109.     }
  111.     .custom-slider__nav:hover {
  112.         background-color: rgba(255, 255, 255, 1);
  113.         transform: translateY(-50%) scale(1.1);
  114.     }
  116.     .custom-slider__nav:active {
  117.         transform: translateY(-50%) scale(0.95);
  118.     }
  120.     .custom-slider__nav--prev {
  121.         left: 15px;
  122.     }
  124.     .custom-slider__nav--next {
  125.         right: 15px;
  126.     }
  128.     .custom-slider__nav i {
  129.         font-size: 18px;
  130.         color: #333;
  131.     }
  133.     /* レスポンシブ調整 */
  134.     @media (max-width: 767px) {
  135.         .custom-slider__nav {
  136.             width: 30px;
  137.             height: 30px;
  138.         }
  139.     }
  141.     /* アニメーション用 */
  142.     .custom-slider__track.is-transitioning {
  143.         transition: transform 0.5s ease-in-out;
  144.     }
  146.     /* ミニスライダー */
  147.     .mini-slider {
  148.         position: relative;
  149.         width: 100%;
  150.         max-width: 1200px;
  151.         margin: 20px auto 0;
  152.         padding: 0 15px 40px;
  153.     }
  155.     .mini-slider__container {
  156.         position: relative;
  157.         overflow: hidden;
  158.     }
  160.     .mini-slider__track {
  161.         display: flex;
  162.         gap: 12px;
  163.         transition: transform 0.3s ease;
  164.         padding: 8px 0;
  165.     }
  167.     /* トランジション無効化用 */
  168.     .mini-slider__track.no-transition {
  169.         transition: none;
  170.     }
  172.     .mini-slider__item {
  173.         flex-shrink: 0;
  174.         width: calc(16.66% - 10px);
  175.         min-width: 120px;
  176.         aspect-ratio: 16 / 9;
  177.         cursor: pointer;
  178.         position: relative;
  179.         border-radius: 6px;
  180.         overflow: hidden;
  181.         border: 2px solid transparent;
  182.         transition: all 0.3s ease;
  183.         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  184.     }
  186.     /* アクティブでないミニスライダーに網掛け */
  187.     .mini-slider__item::before {
  188.         content: '';
  189.         position: absolute;
  190.         top: 0;
  191.         left: 0;
  192.         right: 0;
  193.         bottom: 0;
  194.         background-color: rgba(0, 0, 0, 0.5);
  195.         opacity: 1;
  196.         transition: opacity 0.3s ease;
  197.         z-index: 1;
  198.         pointer-events: none;
  199.     }
  201.     .mini-slider__item.is-active::before {
  202.         opacity: 0;
  203.     }
  205.     .mini-slider__item:hover {
  206.         transform: scale(1.05);
  207.         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  208.     }
  210.     .mini-slider__item:hover::before {
  211.         opacity: 0.3;
  212.     }
  214.     .mini-slider__item.is-active {
  215.         border-color: #23ac38;
  216.         box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
  217.     }
  219.     .mini-slider__item.is-active:hover::before {
  220.         opacity: 0;
  221.     }
  223.     .mini-slider__item img {
  224.         width: 100%;
  225.         height: 100%;
  226.         object-fit: cover;
  227.         display: block;
  228.     }
  230.     /* レスポンシブ: タブレット */
  231.     @media (max-width: 991px) {
  232.         .mini-slider__item {
  233.             width: calc(20% - 9.6px);
  234.             min-width: 100px;
  235.         }
  236.     }
  238.     /* レスポンシブ: モバイル（非表示） */
  239.     @media (max-width: 767px) {
  240.         .mini-slider {
  241.             display: none;
  242.         }
  243.     }
  245.     /* モバイルドットインジケーター */
  246.     .mobile-dots {
  247.         display: none; /* デフォルトは非表示 */
  248.         justify-content: center;
  249.         align-items: center;
  250.         gap: 8px;
  251.         padding: 15px 0;
  252.         margin-top: 10px;
  253.     }
  255.     @media (max-width: 767px) {
  256.         .mobile-dots {
  257.             display: flex; /* スマホのみ表示 */
  258.         }
  259.     }
  261.     .mobile-dot {
  262.         width: 10px;
  263.         height: 10px;
  264.         border-radius: 50%;
  265.         background-color: rgba(0, 0, 0, 0.3);
  266.         border: none;
  267.         cursor: pointer;
  268.         transition: all 0.3s ease;
  269.         padding: 0;
  270.     }
  272.     .mobile-dot:hover {
  273.         background-color: rgba(0, 0, 0, 0.5);
  274.     }
  276.     .mobile-dot.is-active {
  277.         background-color: #23ac38;
  278.         transform: scale(1.3);
  279.     }
  280. </style>
  282. <div class="custom-slider" id="customSlider">
  283.     <div class="custom-slider__wrapper">
  284.         <div class="custom-slider__track" id="sliderTrack">
  285.             {% for slider in sliders %}
  286.                 <div class="custom-slider__item" data-index="{{ loop.index0 }}">
  287.                     {% set link = slider.url ? slider.url : (slider.Category ? '/products/list?category_id=' ~ slider.Category.id : null) %}
  288.                     {% if link %}
  289.                         <a href="{{ link }}"
  290.                            class="custom-slider__link"
  291.                            {% if slider.targetBlank %}target="_blank" rel="noopener noreferrer"{% endif %}>
  292.                             <img src="{{ asset(slider.fileName, 'save_image') }}"
  293.                                  alt="{{ slider.altText }}"
  294.                                  class="custom-slider__image">
  295.                         </a>
  296.                     {% else %}
  297.                         <img src="{{ asset(slider.fileName, 'save_image') }}"
  298.                              alt="{{ slider.altText }}"
  299.                              class="custom-slider__image">
  300.                     {% endif %}
  301.                 </div>
  302.             {% endfor %}
  303.         </div>
  304.     </div>
  306.     <!-- ナビゲーションボタン -->
  307.     <button class="custom-slider__nav custom-slider__nav--prev" id="sliderPrev">
  308.         <i class="fas fa-chevron-left"></i>
  309.     </button>
  310.     <button class="custom-slider__nav custom-slider__nav--next" id="sliderNext">
  311.         <i class="fas fa-chevron-right"></i>
  312.     </button>
  313. </div>
  315. <!-- モバイルドットインジケーター -->
  316. <div class="mobile-dots" id="mobileDots">
  317.     {% for slider in sliders %}
  318.         <button class="mobile-dot" data-index="{{ loop.index0 }}"></button>
  319.     {% endfor %}
  320. </div>
  322. <!-- ミニスライダー -->
  323. <div class="mini-slider" id="miniSlider">
  324.     <div class="mini-slider__container">
  325.         <div class="mini-slider__track" id="miniSliderTrack">
  326.             {% for slider in sliders %}
  327.                 <div class="mini-slider__item" data-index="{{ loop.index0 }}">
  328.                     <img src="{{ asset(slider.fileName, 'save_image') }}"
  329.                          alt="{{ slider.altText }}">
  330.                 </div>
  331.             {% endfor %}
  332.         </div>
  333.     </div>
  334. </div>
  336. <script>
  337.     (function() {
  338.         var slideCount = {{ sliders|length }};
  339.         if (slideCount === 0) return;
  341.         const slider = {
  342.             currentIndex: 1, // クローンスライドを考慮して1からスタート
  343.             totalSlides: slideCount,
  344.             realSlides: slideCount,
  345.             miniCloneCount: Math.min(3, slideCount), // ミニスライダーのクローン枚数（スライド数に応じて調整）
  346.             miniCurrentIndex: Math.min(3, slideCount), // ミニスライダーはクローン枚数を考慮してスタート
  347.             miniTotalSlides: slideCount,
  348.             miniRealSlides: slideCount,
  349.             autoplayInterval: null,
  350.             autoplayDuration: 5000, // 5秒
  351.             isTransitioning: false,
  352.             isMiniTransitioning: false,
  354.             elements: {
  355.                 track: null,
  356.                 items: null,
  357.                 prevBtn: null,
  358.                 nextBtn: null,
  359.                 miniSlider: null,
  360.                 miniTrack: null,
  361.                 miniItems: null,
  362.                 mobileDots: null
  363.             },
  365.             init: function() {
  366.                 // DOM要素の取得
  367.                 this.elements.track = document.getElementById('sliderTrack');
  368.                 this.elements.prevBtn = document.getElementById('sliderPrev');
  369.                 this.elements.nextBtn = document.getElementById('sliderNext');
  370.                 this.elements.miniSlider = document.getElementById('miniSlider');
  371.                 this.elements.miniTrack = document.getElementById('miniSliderTrack');
  372.                 this.elements.mobileDots = document.querySelectorAll('.mobile-dot');
  374.                 // 1枚以下の場合はスライダー機能を無効化
  375.                 if (this.realSlides <= 1) {
  376.                     this.elements.prevBtn.style.display = 'none';
  377.                     this.elements.nextBtn.style.display = 'none';
  378.                     if (this.elements.miniSlider) this.elements.miniSlider.style.display = 'none';
  379.                     var dotsContainer = document.getElementById('mobileDots');
  380.                     if (dotsContainer) dotsContainer.style.display = 'none';
  381.                     var singleItems = this.elements.track.querySelectorAll('.custom-slider__item');
  382.                     if (singleItems.length > 0) singleItems[0].classList.add('is-active');
  383.                     return;
  384.                 }
  386.                 // クローンスライドの追加（メイン）
  387.                 this.createClones();
  389.                 // クローンスライドの追加（ミニ）
  390.                 this.createMiniClones();
  392.                 // 要素の再取得（クローン追加後）
  393.                 this.elements.items = document.querySelectorAll('.custom-slider__item');
  394.                 this.elements.miniItems = document.querySelectorAll('.mini-slider__item');
  395.                 this.totalSlides = this.elements.items.length;
  396.                 this.miniTotalSlides = this.elements.miniItems.length;
  398.                 // 初期位置設定
  399.                 this.updateSlider(false);
  401.                 // イベントバインド
  402.                 this.bindEvents();
  404.                 // 自動再生開始
  405.                 this.startAutoplay();
  406.             },
  408.             createClones: function() {
  409.                 const track = this.elements.track;
  410.                 const items = track.querySelectorAll('.custom-slider__item');
  412.                 // 最後のスライドのクローンを先頭に追加
  413.                 const lastClone = items[items.length - 1].cloneNode(true);
  414.                 lastClone.classList.add('clone');
  415.                 track.insertBefore(lastClone, items[0]);
  417.                 // 最初のスライドのクローンを最後に追加
  418.                 const firstClone = items[0].cloneNode(true);
  419.                 firstClone.classList.add('clone');
  420.                 track.appendChild(firstClone);
  421.             },
  423.             createMiniClones: function() {
  424.                 const track = this.elements.miniTrack;
  425.                 const items = track.querySelectorAll('.mini-slider__item');
  426.                 const itemCount = items.length;
  427.                 const cloneCount = this.miniCloneCount;
  429.                 // 先頭に最後のN枚のクローンを追加（逆順で追加）
  430.                 for (let i = cloneCount - 1; i >= 0; i--) {
  431.                     const clone = items[itemCount - 1 - i].cloneNode(true);
  432.                     clone.classList.add('clone');
  433.                     track.insertBefore(clone, items[0]);
  434.                 }
  436.                 // 末尾に最初のN枚のクローンを追加
  437.                 for (let i = 0; i < cloneCount; i++) {
  438.                     const clone = items[i].cloneNode(true);
  439.                     clone.classList.add('clone');
  440.                     track.appendChild(clone);
  441.                 }
  442.             },
  444.             bindEvents: function() {
  445.                 this.elements.prevBtn.addEventListener('click', () => this.prev());
  446.                 this.elements.nextBtn.addEventListener('click', () => this.next());
  448.                 // トランジション終了イベント（メイン）
  449.                 this.elements.track.addEventListener('transitionend', () => {
  450.                     this.handleTransitionEnd();
  451.                 });
  453.                 // トランジション終了イベント（ミニ）
  454.                 this.elements.miniTrack.addEventListener('transitionend', () => {
  455.                     this.handleMiniTransitionEnd();
  456.                 });
  458.                 // ミニスライダーのクリックイベント（クローンを含む全てのスライド）
  459.                 this.elements.miniItems.forEach((item, index) => {
  460.                     item.addEventListener('click', () => {
  461.                         // クローンの場合はクローン位置のまま同期、実スライドの場合は従来通り
  462.                         if (item.classList.contains('clone')) {
  463.                             // クローンがクリックされた場合、そのクローン位置に同期
  464.                             this.goToSlideByMiniIndex(index);
  465.                             } else {
  466.                             // 実スライドの場合は従来通り
  467.                             const realIndex = parseInt(item.getAttribute('data-index'));
  468.                             this.goToSlide(realIndex);
  469.                         }
  470.                     });
  471.                 });
  473.                 // モバイルドットのクリックイベント
  474.                 this.elements.mobileDots.forEach(dot => {
  475.                     dot.addEventListener('click', () => {
  476.                         const index = parseInt(dot.getAttribute('data-index'));
  477.                         this.goToSlide(index);
  478.                     });
  479.                 });
  480.             },
  482.             updateSlider: function(animate = true) {
  483.                 const isMobile = window.innerWidth < 768;
  484.                 const offset = isMobile ?
  485.                 -(this.currentIndex * 84) + 8 :
  486.                 -(this.currentIndex * 52) + 24;
  488.                 // アニメーションの有効/無効
  489.                 if (!animate) {
  490.                     this.elements.track.classList.add('no-transition');
  491.                     } else {
  492.                     this.elements.track.classList.remove('no-transition');
  493.                 }
  495.                 this.elements.track.style.transform = `translateX(${offset}%)`;
  497.                 // アクティブクラスの更新（デスクトップのみ）
  498.                 if (!isMobile) {
  499.                     this.elements.items.forEach((item, index) => {
  500.                         item.classList.toggle('is-active', index === this.currentIndex);
  501.                     });
  502.                 }
  504.                 // アニメーションなしの場合は即座にクラスを戻す
  505.                 if (!animate) {
  506.                     setTimeout(() => {
  507.                         this.elements.track.classList.remove('no-transition');
  508.                     }, 50);
  509.                 }
  511.                 // ミニスライダーの更新（同じanimate設定を適用）
  512.                 this.updateMiniSlider(animate);
  514.                 // モバイルドットの更新
  515.                 this.updateMobileDots();
  516.             },
  518.             updateMobileDots: function() {
  519.                 // モバイルドットが存在しない場合は何もしない
  520.                 if (!this.elements.mobileDots || this.elements.mobileDots.length === 0) return;
  522.                 // 現在のスライドインデックスを計算（クローンを除く）
  523.                 let realIndex = this.currentIndex - 1;
  524.                 if (realIndex < 0) realIndex = this.realSlides - 1;
  525.                 if (realIndex >= this.realSlides) realIndex = 0;
  527.                 // アクティブクラスの更新
  528.                 this.elements.mobileDots.forEach(dot => {
  529.                     const dotIndex = parseInt(dot.getAttribute('data-index'));
  530.                     dot.classList.toggle('is-active', dotIndex === realIndex);
  531.                 });
  532.             },
  534.             updateMiniSlider: function(animate = true) {
  535.                 if (!this.elements.miniItems || this.elements.miniItems.length === 0) return;
  537.                 // ミニスライダーのインデックスをメインに同期（オフセット調整）
  538.                 // メインはクローン1枚（index 1から）、ミニはクローン3枚（index 3から）
  539.                 this.miniCurrentIndex = this.currentIndex + (this.miniCloneCount - 1); // クローン枚数差でオフセットを調整
  541.                 // 実際のスライドインデックスを計算（クローンを除く）
  542.                 let realIndex = this.currentIndex - 1;
  543.                 if (realIndex < 0) realIndex = this.miniRealSlides - 1;
  544.                 if (realIndex >= this.miniRealSlides) realIndex = 0;
  546.                 // アクティブクラスの更新（クローンを除く実スライドのみ）
  547.                 this.elements.miniItems.forEach((item, index) => {
  548.                     if (!item.classList.contains('clone')) {
  549.                         const itemIndex = parseInt(item.getAttribute('data-index'));
  550.                         item.classList.toggle('is-active', itemIndex === realIndex);
  551.                     }
  552.                 });
  554.                 // ミニスライダーの位置計算（クローンを考慮）
  555.                 if (this.elements.miniTrack && this.elements.miniSlider) {
  556.                     // アニメーションの有効/無効
  557.                     if (!animate) {
  558.                         this.elements.miniTrack.classList.add('no-transition');
  559.                         } else {
  560.                         this.elements.miniTrack.classList.remove('no-transition');
  561.                     }
  563.                     // アクティブなアイテムを取得（クローン含む）
  564.                     const allItems = Array.from(this.elements.miniItems);
  565.                     const activeItemIndex = this.miniCurrentIndex;
  566.                     const activeItem = allItems[activeItemIndex];
  568.                     if (activeItem) {
  569.                         const containerWidth = this.elements.miniSlider.offsetWidth;
  570.                         const itemLeft = activeItem.offsetLeft;
  571.                         const itemWidth = activeItem.offsetWidth;
  572.                         const scrollPosition = itemLeft - (containerWidth / 2) + (itemWidth / 2);
  574.                         this.elements.miniTrack.style.transform = `translateX(-${Math.max(0, scrollPosition)}px)`;
  575.                     }
  577.                     // アニメーションなしの場合は即座にクラスを戻す
  578.                     if (!animate) {
  579.                         setTimeout(() => {
  580.                             this.elements.miniTrack.classList.remove('no-transition');
  581.                         }, 50);
  582.                     }
  583.                 }
  584.             },
  586.             goToSlide: function(index) {
  587.                 if (this.isTransitioning) return;
  588.                 this.isTransitioning = true;
  590.                 // クローンを考慮したインデックスに変換（+1）
  591.                 this.currentIndex = index + 1;
  592.                 this.updateSlider(true);
  593.                 this.resetAutoplay();
  594.             },
  596.             goToSlideByMiniIndex: function(miniIndex) {
  597.                 if (this.isTransitioning) return;
  598.                 this.isTransitioning = true;
  600.                 var cloneCount = this.miniCloneCount;
  601.                 var mainCloneCount = 1;
  602.                 var mainIndex;
  604.                 if (miniIndex < cloneCount) {
  605.                     mainIndex = 0;
  606.                 } else if (miniIndex >= this.miniTotalSlides - cloneCount) {
  607.                     mainIndex = this.realSlides + mainCloneCount;
  608.                 } else {
  609.                     mainIndex = miniIndex - cloneCount + mainCloneCount;
  610.                 }
  612.                 this.currentIndex = mainIndex;
  613.                 this.updateSlider(true);
  614.                 this.resetAutoplay();
  615.             },
  617.             next: function() {
  618.                 if (this.isTransitioning) return;
  619.                 this.isTransitioning = true;
  621.                 this.currentIndex++;
  622.                 this.updateSlider(true);
  623.                 this.resetAutoplay();
  624.             },
  626.             prev: function() {
  627.                 if (this.isTransitioning) return;
  628.                 this.isTransitioning = true;
  630.                 this.currentIndex--;
  631.                 this.updateSlider(true);
  632.                 this.resetAutoplay();
  633.             },
  635.             handleTransitionEnd: function() {
  636.                 this.isTransitioning = false;
  638.                 // 最後のクローンに到達したら、最初の実スライドに瞬間移動
  639.                 if (this.currentIndex === this.totalSlides - 1) {
  640.                     this.currentIndex = 1;
  641.                     this.updateSlider(false);
  642.                 }
  644.                 // 最初のクローンに到達したら、最後の実スライドに瞬間移動
  645.                 if (this.currentIndex === 0) {
  646.                     this.currentIndex = this.totalSlides - 2;
  647.                     this.updateSlider(false);
  648.                 }
  649.             },
  651.             handleMiniTransitionEnd: function() {
  652.                 this.isMiniTransitioning = false;
  654.                 // 最後のクローン領域に到達したら、最初の実スライドに瞬間移動
  655.                 if (this.miniCurrentIndex >= this.miniTotalSlides - this.miniCloneCount) {
  656.                     this.miniCurrentIndex = this.miniCloneCount; // 最初の実スライド位置
  657.                     this.updateMiniSliderPosition(false);
  658.                 }
  660.                 // 最初のクローン領域に到達したら、最後の実スライドに瞬間移動
  661.                 if (this.miniCurrentIndex < this.miniCloneCount) {
  662.                     this.miniCurrentIndex = this.miniTotalSlides - this.miniCloneCount - 1; // 最後の実スライド位置
  663.                     this.updateMiniSliderPosition(false);
  664.                 }
  665.             },
  667.             updateMiniSliderPosition: function(animate = true) {
  668.                 if (!this.elements.miniTrack || !this.elements.miniSlider) return;
  670.                 // アニメーションの有効/無効
  671.                 if (!animate) {
  672.                     this.elements.miniTrack.classList.add('no-transition');
  673.                     } else {
  674.                     this.elements.miniTrack.classList.remove('no-transition');
  675.                 }
  677.                 // アクティブなアイテムを取得（クローン含む）
  678.                 const allItems = Array.from(this.elements.miniItems);
  679.                 const activeItem = allItems[this.miniCurrentIndex];
  681.                 if (activeItem) {
  682.                     const containerWidth = this.elements.miniSlider.offsetWidth;
  683.                     const itemLeft = activeItem.offsetLeft;
  684.                     const itemWidth = activeItem.offsetWidth;
  685.                     const scrollPosition = itemLeft - (containerWidth / 2) + (itemWidth / 2);
  687.                     this.elements.miniTrack.style.transform = `translateX(-${Math.max(0, scrollPosition)}px)`;
  688.                 }
  690.                 // アニメーションなしの場合は即座にクラスを戻す
  691.                 if (!animate) {
  692.                     setTimeout(() => {
  693.                         this.elements.miniTrack.classList.remove('no-transition');
  694.                     }, 50);
  695.                 }
  696.             },
  698.             startAutoplay: function() {
  699.                 this.autoplayInterval = setInterval(() => {
  700.                     this.next();
  701.                 }, this.autoplayDuration);
  702.             },
  704.             stopAutoplay: function() {
  705.                 if (this.autoplayInterval) {
  706.                     clearInterval(this.autoplayInterval);
  707.                     this.autoplayInterval = null;
  708.                 }
  709.             },
  711.             resetAutoplay: function() {
  712.                 this.stopAutoplay();
  713.                 this.startAutoplay();
  714.             }
  715.         };
  717.         // スライダー初期化
  718.         if (document.readyState === 'loading') {
  719.             document.addEventListener('DOMContentLoaded', () => slider.init());
  720.             } else {
  721.             slider.init();
  722.         }
  724.         // リサイズ時の再計算
  725.         let resizeTimer;
  726.         window.addEventListener('resize', function() {
  727.             clearTimeout(resizeTimer);
  728.             resizeTimer = setTimeout(() => {
  729.                 slider.updateSlider(false);
  730.             }, 250);
  731.         });
  732.     })();
  733. </script>
  734. {% endif %}