app/template/default/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% set body_class = 'front_page' %}
  3. {% block main %}
  4. <div class="mycarousel-wrapper">
  5.     <div class="mycarousel-slider">
  6.         {# PC用画像リスト　main-visual.jpg #}
  7.         {% set pc_images = [
  8.             'main-visual.jpg',
  9.             'main-visual.jpg',
  10.             'main-visual.jpg'
  11.         ] %}
  12.         
  13.         {# SP用画像リスト　sp-topImages.jpg #}
  14.         {% set sp_images = [
  15.         'sp-topImages.jpg',
  16.         'sp-topImages.jpg',
  17.         'sp-topImages.jpg'
  18.         ] %}
  19.         
  20.         {# 実際に表示する画像を選択（0から始まるインデックス番号で指定） #}
  21.         {% set display_images = [0,1,2] %}
  22.         
  23.         {% for index in display_images %}
  24.             <div class="mycarousel-slide">
  25.                 <img class="desktop-image" src="{{ asset('/html/user_data/ContentImg/' ~ pc_images[index]) }}" alt="スライド画像">
  26.                 <img class="mobile-image" src="{{ asset('/html/user_data/ContentImg/' ~ sp_images[index]) }}" alt="スライド画像">
  27.             </div>
  28.         {% endfor %}
  29.     </div>
  30. </div>
  31. {% endblock %}
  32. {% block stylesheet %}
  33. <style>
  34. /* slickのデフォルト黒丸（before擬似要素）を無効化 */
  35. .mycarousel-slider .slick-dots li button::before {
  36.     display: none;
  37.     content: '';
  38. }
  39. .slick-dots li {
  40.     position:unset;
  41.     display: inline-block;
  42.     width: 20px;
  43.     height: 20px;
  44.     margin: 0 5px;
  45.     padding: 0;
  46.     cursor: pointer;
  47. }
  48. .mycarousel-slider .slick-dots li {
  49.     width: 10px;
  50.     height: 10px;
  51. }
  52. .mycarousel-slider .slick-dots li button {
  53.     width: 100%;
  54.     height: 100%;
  55.     padding: 0;
  56.     border: none;
  57.     border-radius: 50%;
  58.     background-color: #ccc;
  59.     opacity: 0.7;
  60.     transition: all 0.3s ease;
  61.     font-size: 0;
  62.     cursor: pointer;
  63. }
  64. .mycarousel-slider .slick-dots li.slick-active button {
  65.     background-color: #b8860b;
  66.     transform: scale(1.3);
  67.     opacity: 1;
  68. }
  70. /* フルワイドの外枠 */
  71. .mycarousel-wrapper {
  72.     width: 100vw;
  73.     max-width: none;
  74.     margin-left: calc(-50vw + 50%);
  75.     margin-right: calc(-50vw + 50%);
  76.     overflow: hidden;
  77.     padding: 0;
  78.     /* 初期化時のちらつき防止 */
  79.     visibility: hidden;
  80. }
  82. /* slickのトラック修正 */
  83. .slick-track {
  84.     display: flex !important;
  85.     align-items: center;
  86. }
  87. .slick-slide {
  88.     padding: 0 !important;
  89.     margin: 0 !important;
  90. }
  92. /* スライド本体（動的高さ対応） */
  93. .mycarousel-slide {
  94.     box-sizing: border-box;
  95.     padding: 0 !important;
  96.     margin: 0 !important;
  97.     position: relative;
  98.     transition: all 0.5s ease;
  99.     overflow: hidden;
  100.     /* 高さは動的に設定される */
  101.     height: 60vh; /* 初期値：JavaScript で調整される */
  102. }
  104. /* 画像の基本スタイル */
  105. .desktop-image,
  106. .mobile-image {
  107.     position: absolute;
  108.     top: 0;
  109.     left: 0;
  110.     width: 100%;
  111.     height: 100%;
  112.     transition: all 0.5s ease;
  113.     /* object-fit は JavaScript で動的に調整 */
  114.     object-fit: contain;
  115. }
  117. /* デスクトップ時のスタイル（768pxより大きい） */
  118. @media (min-width: 769px) {
  119.     .desktop-image {
  120.         display: block !important;
  121.     }
  122.     .mobile-image {
  123.         display: none !important;
  124.     }
  125. }
  127. /* モバイル時のスタイル（768px以下） */
  128. @media (max-width: 768px) {
  129.     .mycarousel-wrapper {
  130.         width: 100vw;
  131.         margin-left: calc(-50vw + 50%);
  132.         margin-right: calc(-50vw + 50%);
  133.     }
  134.     
  135.     .mycarousel-slide {
  136.         width: 100vw !important;
  137.         height: auto !important;
  138.         padding: 0 !important;
  139.         margin: 0 !important;
  140.         opacity: 1 !important;
  141.         filter: none !important;
  142.     }
  144.     .desktop-image {
  145.         display: none !important;
  146.     }
  147.     
  148.     .mobile-image {
  149.         display: block !important;
  150.         position: relative !important;
  151.         width: 100% !important;
  152.         height: auto !important;
  153.         object-fit: contain !important;
  154.         filter: brightness(1) contrast(1) !important;
  155.     }
  156. }
  158. /* 左右の画像を暗くするエフェクト（デスクトップのみ） */
  159. @media (min-width: 769px) {
  160.     .mycarousel-slide.side-slide {
  161.         opacity: 0.6;
  162.     }
  163.     .mycarousel-slide.side-slide .desktop-image {
  164.         filter: brightness(0.7) contrast(0.9);
  165.     }
  166.     .mycarousel-slide.center-slide {
  167.         opacity: 1;
  168.     }
  169.     .mycarousel-slide.center-slide .desktop-image {
  170.         filter: brightness(1) contrast(1);
  171.     }
  172.     .mycarousel-slide.side-slide:hover {
  173.         opacity: 0.8;
  174.         transform: scale(1.02);
  175.     }
  176.     .mycarousel-slide.side-slide:hover .desktop-image {
  177.         filter: brightness(0.85) contrast(0.95);
  178.     }
  179. }
  181. /* 動的高さ調整用のユーティリティクラス */
  182. .dynamic-fit-contain {
  183.     object-fit: contain;
  184. }
  185. .dynamic-fit-cover {
  186.     object-fit: cover;
  187. }
  188. </style>
  189. {% endblock %}
  190. {% block javascript %}
  191. <script>
  192. $(function() {
  193.     // 動的レスポンシブ設定
  194.     const RESPONSIVE_CONFIG = {
  195.         desktop: {
  196.             targetAspectRatio: 16/9,
  197.             minHeight: '30vh',
  198.             maxHeight: '60vh',
  199.             marginThreshold: 0.15
  200.         },
  201.         mobile: {
  202.             targetAspectRatio: 4/3,
  203.             minHeight: '35vh',
  204.             maxHeight: '85vh',
  205.             marginThreshold: 0.12
  206.         }
  207.     };
  209.     let isInitialized = false;
  210.     let currentImages = [];
  212.     // 画面幅に応じた動的centerPadding計算
  213.     function calculateCenterPadding() {
  214.         const windowWidth = $(window).width();
  215.         let padding;
  216.         
  217.         // 画面幅に応じてcenterPaddingを計算（調整可能な閾値）
  218.         if (windowWidth <= 768) {
  219.             // モバイル: 余白なし
  220.             padding = '0';
  221.         } else if (windowWidth <= 1024) {
  222.             // タブレット: 小さめの余白
  223.             padding = '8vw';
  224.         } else if (windowWidth <= 1200) {
  225.             // 小型デスクトップ: 中程度の余白
  226.             padding = '12vw';
  227.         }else if (windowWidth <= 1440) {
  228.             // 小型デスクトップ: 中程度の余白
  229.             padding = '15vw';
  230.         
  231.         } else if (windowWidth <= 1920) {
  232.             // 標準デスクトップ: やや大きめの余白
  233.             padding = '20vw';
  234.         } else {
  235.             // 大型ディスプレイ: 最大余白を制限
  236.             padding = '25vw';
  237.         }
  238.         
  239.         return padding;
  240.     }
  242.     // centerPaddingを動的に更新する関数
  243.     function updateCenterPadding() {
  244.         const newPadding = calculateCenterPadding();
  245.         const windowWidth = $(window).width();
  246.         
  247.         // モバイルはcenterMode自体を無効にする
  248.         const centerModeEnabled = windowWidth > 768;
  249.         
  250.         if ($('.mycarousel-slider').hasClass('slick-initialized')) {
  251.             $('.mycarousel-slider').slick('slickSetOption', 'centerMode', centerModeEnabled, false);
  252.             $('.mycarousel-slider').slick('slickSetOption', 'centerPadding', newPadding, true);
  253.         }
  254.     }
  256.     // 現在のデバイスに応じた画像を取得
  257.     function getCurrentImages() {
  258.         const isMobile = $(window).width() <= 768;
  259.         return isMobile ? $('.mobile-image') : $('.desktop-image');
  260.     }
  262.     // 画像プリロード関数
  263.     function preloadImages() {
  264.         return new Promise((resolve) => {
  265.             const images = getCurrentImages();
  266.             let loadedCount = 0;
  267.             const totalImages = images.length;
  269.             if (totalImages === 0) {
  270.                 resolve();
  271.                 return;
  272.             }
  274.             images.each(function() {
  275.                 const img = this;
  276.                 
  277.                 if (img.complete && img.naturalWidth > 0) {
  278.                     loadedCount++;
  279.                     if (loadedCount >= totalImages) {
  280.                         resolve();
  281.                     }
  282.                 } else {
  283.                     $(img).on('load error', function() {
  284.                         loadedCount++;
  285.                         if (loadedCount >= totalImages) {
  286.                             resolve();
  287.                         }
  288.                     });
  289.                     
  290.                     // 強制的に再読み込みをトリガー（キャッシュ対策）
  291.                     if (!img.src) {
  292.                         img.src = img.getAttribute('src');
  293.                     }
  294.                 }
  295.             });
  296.         });
  297.     }
  299.     // スライダー初期化（動的centerPadding対応版）
  300.     function initializeSlider() {
  301.         if ($('.mycarousel-slider').hasClass('slick-initialized')) {
  302.             $('.mycarousel-slider').slick('unslick');
  303.         }
  305.         const initialPadding = calculateCenterPadding();
  306.         const windowWidth = $(window).width();
  307.         const centerModeEnabled = windowWidth > 768;
  309.         $('.mycarousel-slider').slick({
  310.             centerMode: centerModeEnabled,
  311.             centerPadding: initialPadding,
  312.             slidesToShow: 1,
  313.             autoplay: false, // 初期化時は自動再生を無効にして安定性を確保
  314.             autoplaySpeed: 5000,
  315.             arrows: true,
  316.             dots: true,
  317.             adaptiveHeight: false,
  318.             fade: false,
  319.             speed: 300
  320.             // responsive設定は削除（動的制御に切り替え）
  321.         });
  323.         // スライド変更時にクラスを更新
  324.         $('.mycarousel-slider').on('afterChange', function(event, slick, currentSlide) {
  325.             updateSlideClasses();
  326.         });
  327.     }
  329.     // 動的な表示最適化メイン関数
  330.     function optimizeCarouselDisplay() {
  331.         const isMobile = $(window).width() <= 768;
  332.         const config = isMobile ? RESPONSIVE_CONFIG.mobile : RESPONSIVE_CONFIG.desktop;
  333.         const $currentImages = getCurrentImages();
  334.         
  335.         if ($currentImages.length === 0) return;
  337.         // モバイル時は簡単な設定にする
  338.         if (isMobile) {
  339.             // モバイル時：width 100vw、height auto
  340.             $('.mycarousel-slide').css({
  341.                 'height': 'auto',
  342.                 'width': '100vw'
  343.             });
  344.             $currentImages.css({
  345.                 'width': '100%',
  346.                 'height': 'auto',
  347.                 'object-fit': 'contain',
  348.                 'position': 'relative'
  349.             });
  350.             
  351.             // 初期化完了後に自動再生を開始
  352.             if (isInitialized && $('.mycarousel-slider').slick('slickGetOption', 'autoplay') === false) {
  353.                 $('.mycarousel-slider').slick('slickSetOption', 'autoplay', true, true);
  354.             }
  355.             return;
  356.         }
  358.         const $firstImage = $currentImages.filter(':visible').first();
  359.         if ($firstImage.length === 0 || !$firstImage[0].complete || !$firstImage[0].naturalWidth) {
  360.             return;
  361.         }
  363.         const imageWidth = $firstImage[0].naturalWidth;
  364.         const imageHeight = $firstImage[0].naturalHeight;
  365.         const imageAspectRatio = imageWidth / imageHeight;
  366.         
  367.         const containerWidth = $('.mycarousel-wrapper').width();
  368.         const containerAspectRatio = config.targetAspectRatio;
  369.         
  370.         const maxRenderWidth = Math.min(imageWidth, containerWidth);
  371.         const maxRenderHeight = maxRenderWidth / imageAspectRatio;
  372.         
  373.         const viewportMinHeightPx = parseFloat(config.minHeight) * $(window).height() / 100;
  374.         const viewportMaxHeightPx = parseFloat(config.maxHeight) * $(window).height() / 100;
  375.         
  376.         let optimalHeight;
  377.         let objectFitMode = 'contain';
  379.         const aspectRatioDiff = Math.abs(imageAspectRatio - containerAspectRatio) / containerAspectRatio;
  381.         if (maxRenderHeight <= viewportMaxHeightPx && maxRenderHeight >= viewportMinHeightPx) {
  382.             optimalHeight = maxRenderHeight;
  383.         } else if (maxRenderHeight > viewportMaxHeightPx) {
  384.             if (aspectRatioDiff <= config.marginThreshold) {
  385.                 optimalHeight = viewportMaxHeightPx;
  386.             } else {
  387.                 optimalHeight = Math.min(containerWidth / imageAspectRatio, viewportMaxHeightPx);
  388.             }
  389.         } else {
  390.             if (maxRenderHeight < viewportMinHeightPx) {
  391.                 const scaleUpLimit = Math.min(2.0, viewportMinHeightPx / maxRenderHeight);
  392.                 if (scaleUpLimit <= 1.5) {
  393.                     optimalHeight = viewportMinHeightPx;
  394.                 } else {
  395.                     optimalHeight = maxRenderHeight;
  396.                 }
  397.             } else {
  398.                 optimalHeight = maxRenderHeight;
  399.             }
  400.         }
  402.         // 最終的な制限適用
  403.         optimalHeight = Math.max(viewportMinHeightPx, Math.min(viewportMaxHeightPx, optimalHeight));
  405.         // 画像の品質を考慮したobject-fit調整
  406.         const renderScale = optimalHeight / maxRenderHeight;
  407.         if (renderScale > 1.2) {
  408.             objectFitMode = 'contain';
  409.         } else {
  410.             objectFitMode = 'contain';
  411.         }
  413.         // スタイル適用（デスクトップのみ）
  414.         $('.mycarousel-slide').css('height', optimalHeight + 'px');
  415.         $currentImages.css({
  416.             'object-fit': objectFitMode,
  417.             'image-rendering': renderScale > 1.1 ? 'smooth' : 'auto'
  418.         });
  420.         // 初期化完了後に自動再生を開始
  421.         if (isInitialized && $('.mycarousel-slider').slick('slickGetOption', 'autoplay') === false) {
  422.             $('.mycarousel-slider').slick('slickSetOption', 'autoplay', true, true);
  423.         }
  424.     }
  426.     // スライドのクラスを更新する関数
  427.     function updateSlideClasses() {
  428.         $('.mycarousel-slide').removeClass('center-slide side-slide');
  429.         
  430.         if ($(window).width() > 768) {
  431.             $('.slick-center .mycarousel-slide').addClass('center-slide');
  432.             $('.slick-slide:not(.slick-center) .mycarousel-slide').addClass('side-slide');
  433.         } else {
  434.             $('.mycarousel-slide').addClass('center-slide');
  435.         }
  436.     }
  438.     async function initialize() {
  439.         try {
  440.             // カルーセルを一時的に非表示にしてちらつき防止
  441.             $('.mycarousel-wrapper').css('visibility', 'hidden');
  442.             
  443.             await preloadImages();
  444.             
  445.             initializeSlider();
  446.             
  447.             optimizeCarouselDisplay();
  448.             
  449.             updateSlideClasses();
  450.             
  451.             isInitialized = true;
  452.             
  453.             // 6. 少し待ってから表示（slickの初期化完了を確実にする）
  454.             setTimeout(() => {
  455.                 $('.mycarousel-wrapper').css('visibility', 'visible');
  456.                 // 初期化後にもう一度表示を最適化
  457.                 optimizeCarouselDisplay();
  458.                 updateSlideClasses();
  459.             }, 50);
  460.             
  461.             console.log('Carousel initialized successfully');
  462.             
  463.         } catch (error) {
  464.             console.error('Carousel initialization failed:', error);
  465.             // エラー時も表示を戻す
  466.             $('.mycarousel-wrapper').css('visibility', 'visible');
  467.         }
  468.     }
  470.     let resizeTimer;
  471.     $(window).on('resize', function() {
  472.         clearTimeout(resizeTimer);
  473.         resizeTimer = setTimeout(async () => {
  474.             // centerPaddingを動的に更新
  475.             updateCenterPadding();
  476.             
  477.             // デバイス切り替わり時は再初期化
  478.             const newImages = getCurrentImages();
  479.             const imagesSwitched = !currentImages.length || 
  480.                 newImages.length !== currentImages.length ||
  481.                 newImages[0] !== currentImages[0];
  482.             
  483.             if (imagesSwitched) {
  484.                 currentImages = newImages;
  485.                 await preloadImages();
  486.             }
  487.             
  488.             optimizeCarouselDisplay();
  489.             updateSlideClasses();
  490.         }, 200);
  491.     });
  492.     
  493.     $(document).ready(function() {
  494.         currentImages = getCurrentImages();
  495.         initialize();
  496.     });
  497.     
  498.     $(window).on('load', function() {
  499.         if (!isInitialized) {
  500.             initialize();
  501.         }
  502.     });
  503. });
  504. </script>
  505. {% endblock %}