var/cache/dev/twig/01/01e79143cf092d4c3d60a2ae714410cc.php line 40

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\SandboxExtension;
  7. use Twig\Markup;
  8. use Twig\Sandbox\SecurityError;
  9. use Twig\Sandbox\SecurityNotAllowedTagError;
  10. use Twig\Sandbox\SecurityNotAllowedFilterError;
  11. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  12. use Twig\Source;
  13. use Twig\Template;
  15. /* index.twig */
  16. class __TwigTemplate_1288a8c934165619861e7a1b14d9faa4 extends \Eccube\Twig\Template
  17. {
  18.     private $source;
  19.     private $macros = [];
  21.     public function __construct(Environment $env)
  22.     {
  23.         parent::__construct($env);
  25.         $this->source = $this->getSourceContext();
  27.         $this->blocks = [
  28.             'main' => [$this, 'block_main'],
  29.             'stylesheet' => [$this, 'block_stylesheet'],
  30.             'javascript' => [$this, 'block_javascript'],
  31.         ];
  32.     }
  34.     protected function doGetParent(array $context)
  35.     {
  36.         // line 1
  37.         return "default_frame.twig";
  38.     }
  40.     protected function doDisplay(array $context, array $blocks = [])
  41.     {
  42.         $macros = $this->macros;
  43.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  44.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "index.twig"));
  46.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  47.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "index.twig"));
  49.         // line 2
  50.         $context["body_class"] = "front_page";
  51.         // line 1
  52.         $this->parent = $this->loadTemplate("default_frame.twig", "index.twig", 1);
  53.         $this->parent->display($context, array_merge($this->blocks, $blocks));
  54.         
  55.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  57.         
  58.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  60.     }
  62.     // line 3
  63.     public function block_main($context, array $blocks = [])
  64.     {
  65.         $macros = $this->macros;
  66.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  67.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
  69.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  70.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
  72.         // line 4
  73.         echo "<div class=\"mycarousel-wrapper\">
  74.     <div class=\"mycarousel-slider\">
  75.         ";
  76.         // line 7
  77.         echo "        ";
  78.         $context["pc_images"] = [0 => "main-visual.jpg", 1 => "S__23207939.jpg", 2 => "NaiPC.jpg", 3 => "caPC.jpg", 4 => "panPC.jpg"];
  79.         // line 14
  80.         echo "        
  81.         ";
  82.         // line 16
  83.         echo "        ";
  84.         $context["sp_images"] = [0 => "sp-topImages.jpg", 1 => "S__23224325.jpg", 2 => "NaiSP.jpg", 3 => "caSP.jpg", 4 => "panSP.jpg"];
  85.         // line 23
  86.         echo "        
  87.         ";
  88.         // line 25
  89.         echo "        ";
  90.         $context["link_urls"] = [0 => "https://iseyabread.com/", 1 => "https://iseyabread.com/", 2 => "https://iseyabread.com/products/detail/10", 3 => "https://iseyabread.com/products/detail/7", 4 => "https://iseyabread.com/products/detail/9"];
  91.         // line 33
  92.         echo "        
  93.         ";
  94.         // line 35
  95.         echo "        ";
  96.         $context["link_targets"] = [0 => "_self", 1 => "_self", 2 => "_self", 3 => "_self", 4 => "_self"];
  97.         // line 42
  98.         echo "        
  99.         ";
  100.         // line 44
  101.         echo "        ";
  102.         $context["display_images"] = [0 => 0, 1 => 1, 2 => 2, 3 => 3, 4 => 4];
  103.         // line 45
  104.         echo "        
  105.         ";
  106.         // line 46
  107.         $context['_parent'] = $context;
  108.         $context['_seq'] = twig_ensure_traversable((isset($context["display_images"]) || array_key_exists("display_images", $context) ? $context["display_images"] : (function () { throw new RuntimeError('Variable "display_images" does not exist.', 46, $this->source); })()));
  109.         foreach ($context['_seq'] as $context["_key"] => $context["index"]) {
  110.             // line 47
  111.             echo "            <div class=\"mycarousel-slide\">
  112.                 ";
  113.             // line 48
  114.             if (twig_get_attribute($this->env, $this->source, (isset($context["link_urls"]) || array_key_exists("link_urls", $context) ? $context["link_urls"] : (function () { throw new RuntimeError('Variable "link_urls" does not exist.', 48, $this->source); })()), $context["index"], [], "array", false, false, false, 48)) {
  115.                 // line 49
  116.                 echo "                    <a href=\"";
  117.                 echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["link_urls"]) || array_key_exists("link_urls", $context) ? $context["link_urls"] : (function () { throw new RuntimeError('Variable "link_urls" does not exist.', 49, $this->source); })()), $context["index"], [], "array", false, false, false, 49), "html", null, true);
  118.                 echo "\" target=\"";
  119.                 (((twig_get_attribute($this->env, $this->source, ($context["link_targets"] ?? null), $context["index"], [], "array", true, true, false, 49) &&  !(null === twig_get_attribute($this->env, $this->source, ($context["link_targets"] ?? null), $context["index"], [], "array", false, false, false, 49)))) ? (print (twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, ($context["link_targets"] ?? null), $context["index"], [], "array", false, false, false, 49), "html", null, true))) : (print ("_self")));
  120.                 echo "\" class=\"carousel-link\">
  121.                         <img class=\"desktop-image\" src=\"";
  122.                 // line 50
  123.                 echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(("/html/user_data/ContentImg/" . twig_get_attribute($this->env, $this->source, (isset($context["pc_images"]) || array_key_exists("pc_images", $context) ? $context["pc_images"] : (function () { throw new RuntimeError('Variable "pc_images" does not exist.', 50, $this->source); })()), $context["index"], [], "array", false, false, false, 50))), "html", null, true);
  124.                 echo "\" alt=\"スライド画像\">
  125.                         <img class=\"mobile-image\" src=\"";
  126.                 // line 51
  127.                 echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(("/html/user_data/ContentImg/" . twig_get_attribute($this->env, $this->source, (isset($context["sp_images"]) || array_key_exists("sp_images", $context) ? $context["sp_images"] : (function () { throw new RuntimeError('Variable "sp_images" does not exist.', 51, $this->source); })()), $context["index"], [], "array", false, false, false, 51))), "html", null, true);
  128.                 echo "\" alt=\"スライド画像\">
  129.                     </a>
  130.                 ";
  131.             } else {
  132.                 // line 54
  133.                 echo "                    <img class=\"desktop-image\" src=\"";
  134.                 echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(("/html/user_data/ContentImg/" . twig_get_attribute($this->env, $this->source, (isset($context["pc_images"]) || array_key_exists("pc_images", $context) ? $context["pc_images"] : (function () { throw new RuntimeError('Variable "pc_images" does not exist.', 54, $this->source); })()), $context["index"], [], "array", false, false, false, 54))), "html", null, true);
  135.                 echo "\" alt=\"スライド画像\">
  136.                     <img class=\"mobile-image\" src=\"";
  137.                 // line 55
  138.                 echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(("/html/user_data/ContentImg/" . twig_get_attribute($this->env, $this->source, (isset($context["sp_images"]) || array_key_exists("sp_images", $context) ? $context["sp_images"] : (function () { throw new RuntimeError('Variable "sp_images" does not exist.', 55, $this->source); })()), $context["index"], [], "array", false, false, false, 55))), "html", null, true);
  139.                 echo "\" alt=\"スライド画像\">
  140.                 ";
  141.             }
  142.             // line 57
  143.             echo "            </div>
  144.         ";
  145.         }
  146.         $_parent = $context['_parent'];
  147.         unset($context['_seq'], $context['_iterated'], $context['_key'], $context['index'], $context['_parent'], $context['loop']);
  148.         $context = array_intersect_key($context, $_parent) + $_parent;
  149.         // line 59
  150.         echo "    </div>
  151. </div>
  152. ";
  153.         
  154.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  156.         
  157.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  159.     }
  161.     // line 62
  162.     public function block_stylesheet($context, array $blocks = [])
  163.     {
  164.         $macros = $this->macros;
  165.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  166.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheet"));
  168.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  169.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheet"));
  171.         // line 63
  172.         echo "<style>
  173. /* slickのデフォルト黒丸（before擬似要素）を無効化 */
  174. .mycarousel-slider .slick-dots li button::before {
  175.     display: none;
  176.     content: '';
  177. }
  178. .slick-dots li {
  179.     position:unset;
  180.     display: inline-block;
  181.     width: 20px;
  182.     height: 20px;
  183.     margin: 0 5px;
  184.     padding: 0;
  185.     cursor: pointer;
  186. }
  187. .mycarousel-slider .slick-dots li {
  188.     width: 10px;
  189.     height: 10px;
  190. }
  191. .mycarousel-slider .slick-dots li button {
  192.     width: 100%;
  193.     height: 100%;
  194.     padding: 0;
  195.     border: none;
  196.     border-radius: 50%;
  197.     background-color: #ccc;
  198.     opacity: 0.7;
  199.     transition: all 0.3s ease;
  200.     font-size: 0;
  201.     cursor: pointer;
  202. }
  203. .mycarousel-slider .slick-dots li.slick-active button {
  204.     background-color: #b8860b;
  205.     transform: scale(1.3);
  206.     opacity: 1;
  207. }
  209. /* カルーセルリンクのスタイル */
  210. .carousel-link {
  211.     display: block;
  212.     position: relative;
  213.     width: 100%;
  214.     height: 100%;
  215.     text-decoration: none;
  216.     cursor: pointer;
  217.     transition: opacity 0.3s ease;
  218. }
  220. .carousel-link:hover {
  221.     opacity: 0.9;
  222. }
  224. .mycarousel-wrapper {
  225.     width: 100vw;
  226.     max-width: none;
  227.     margin-left: calc(-50vw + 50%);
  228.     margin-right: calc(-50vw + 50%);
  229.     overflow: hidden;
  230.     padding: 0;
  231.     /* 初期化時のちらつき防止 */
  232.     visibility: hidden;
  233. }
  235. .slick-track {
  236.     display: flex !important;
  237.     align-items: center;
  238. }
  239. .slick-slide {
  240.     padding: 0 !important;
  241.     margin: 0 !important;
  242. }
  244. /* スライド本体（動的高さ対応） */
  245. .mycarousel-slide {
  246.     box-sizing: border-box;
  247.     padding: 0 !important;
  248.     margin: 0 !important;
  249.     position: relative;
  250.     transition: all 0.5s ease;
  251.     overflow: hidden;
  252.     height: 60vh; /* 初期値：JavaScript で調整される */
  253. }
  255. /* 画像の基本スタイル */
  256. .desktop-image,
  257. .mobile-image {
  258.     position: absolute;
  259.     top: 0;
  260.     left: 0;
  261.     width: 100%;
  262.     height: 100%;
  263.     transition: all 0.5s ease;
  264.     /* object-fit は JavaScript で動的に調整 */
  265.     object-fit: contain;
  266. }
  268. /* デスクトップ時のスタイル（768pxより大きい） */
  269. @media (min-width: 769px) {
  270.     .desktop-image {
  271.         display: block !important;
  272.     }
  273.     .mobile-image {
  274.         display: none !important;
  275.     }
  276. }
  278. /* モバイル時のスタイル（768px以下） */
  279. @media (max-width: 768px) {
  280.     .mycarousel-wrapper {
  281.         width: 100vw;
  282.         margin-left: calc(-50vw + 50%);
  283.         margin-right: calc(-50vw + 50%);
  284.     }
  285.     
  286.     .mycarousel-slide {
  287.         width: 100vw !important;
  288.         height: auto !important;
  289.         padding: 0 !important;
  290.         margin: 0 !important;
  291.         opacity: 1 !important;
  292.         filter: none !important;
  293.     }
  295.     .desktop-image {
  296.         display: none !important;
  297.     }
  298.     
  299.     .mobile-image {
  300.         display: block !important;
  301.         position: relative !important;
  302.         width: 100% !important;
  303.         height: auto !important;
  304.         object-fit: contain !important;
  305.         filter: brightness(1) contrast(1) !important;
  306.     }
  307. }
  309. /* 左右の画像を暗くするエフェクト（デスクトップのみ） */
  310. @media (min-width: 769px) {
  311.     .mycarousel-slide.side-slide {
  312.         opacity: 0.6;
  313.     }
  314.     .mycarousel-slide.side-slide .desktop-image {
  315.         filter: brightness(0.7) contrast(0.9);
  316.     }
  317.     .mycarousel-slide.center-slide {
  318.         opacity: 1;
  319.     }
  320.     .mycarousel-slide.center-slide .desktop-image {
  321.         filter: brightness(1) contrast(1);
  322.     }
  323.     .mycarousel-slide.side-slide:hover {
  324.         opacity: 0.8;
  325.         transform: scale(1.02);
  326.     }
  327.     .mycarousel-slide.side-slide:hover .desktop-image {
  328.         filter: brightness(0.85) contrast(0.95);
  329.     }
  330. }
  332. /* 動的高さ調整用のユーティリティクラス */
  333. .dynamic-fit-contain {
  334.     object-fit: contain;
  335. }
  336. .dynamic-fit-cover {
  337.     object-fit: cover;
  338. }
  339. </style>
  340. ";
  341.         
  342.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  344.         
  345.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  347.     }
  349.     // line 232
  350.     public function block_javascript($context, array $blocks = [])
  351.     {
  352.         $macros = $this->macros;
  353.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  354.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  356.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  357.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  359.         // line 233
  360.         echo "<script>
  361. \$(function() {
  362.     // 動的レスポンシブ設定
  363.     const RESPONSIVE_CONFIG = {
  364.         desktop: {
  365.             targetAspectRatio: 16/9,
  366.             minHeight: '30vh',
  367.             maxHeight: '60vh',
  368.             marginThreshold: 0.15
  369.         },
  370.         mobile: {
  371.             targetAspectRatio: 4/3,
  372.             minHeight: '35vh',
  373.             maxHeight: '85vh',
  374.             marginThreshold: 0.12
  375.         }
  376.     };
  378.     let isInitialized = false;
  379.     let currentImages = [];
  381.     // 画面幅に応じた動的centerPadding計算
  382.     function calculateCenterPadding() {
  383.         const windowWidth = \$(window).width();
  384.         let padding;
  385.         
  386.         // 画面幅に応じてcenterPaddingを計算（調整可能な閾値）
  387.         if (windowWidth <= 768) {
  388.             // モバイル: 余白なし
  389.             padding = '0';
  390.         } else if (windowWidth <= 1024) {
  391.             // タブレット: 小さめの余白
  392.             padding = '8vw';
  393.         } else if (windowWidth <= 1200) {
  394.             // 小型デスクトップ: 中程度の余白
  395.             padding = '12vw';
  396.         }else if (windowWidth <= 1440) {
  397.             // 小型デスクトップ: 中程度の余白
  398.             padding = '15vw';
  399.         
  400.         } else if (windowWidth <= 1920) {
  401.             // 標準デスクトップ: やや大きめの余白
  402.             padding = '20vw';
  403.         } else {
  404.             // 大型ディスプレイ: 最大余白を制限
  405.             padding = '25vw';
  406.         }
  407.         
  408.         return padding;
  409.     }
  411.     // centerPaddingを動的に更新する関数
  412.     function updateCenterPadding() {
  413.         const newPadding = calculateCenterPadding();
  414.         const windowWidth = \$(window).width();
  415.         
  416.         // モバイルはcenterMode自体を無効にする
  417.         const centerModeEnabled = windowWidth > 768;
  418.         
  419.         if (\$('.mycarousel-slider').hasClass('slick-initialized')) {
  420.             \$('.mycarousel-slider').slick('slickSetOption', 'centerMode', centerModeEnabled, false);
  421.             \$('.mycarousel-slider').slick('slickSetOption', 'centerPadding', newPadding, true);
  422.         }
  423.     }
  425.     // 現在のデバイスに応じた画像を取得
  426.     function getCurrentImages() {
  427.         const isMobile = \$(window).width() <= 768;
  428.         return isMobile ? \$('.mobile-image') : \$('.desktop-image');
  429.     }
  431.     // 画像プリロード関数
  432.     function preloadImages() {
  433.         return new Promise((resolve) => {
  434.             const images = getCurrentImages();
  435.             let loadedCount = 0;
  436.             const totalImages = images.length;
  438.             if (totalImages === 0) {
  439.                 resolve();
  440.                 return;
  441.             }
  443.             images.each(function() {
  444.                 const img = this;
  445.                 
  446.                 if (img.complete && img.naturalWidth > 0) {
  447.                     loadedCount++;
  448.                     if (loadedCount >= totalImages) {
  449.                         resolve();
  450.                     }
  451.                 } else {
  452.                     \$(img).on('load error', function() {
  453.                         loadedCount++;
  454.                         if (loadedCount >= totalImages) {
  455.                             resolve();
  456.                         }
  457.                     });
  458.                     
  459.                     // 強制的に再読み込みをトリガー（キャッシュ対策）
  460.                     if (!img.src) {
  461.                         img.src = img.getAttribute('src');
  462.                     }
  463.                 }
  464.             });
  465.         });
  466.     }
  468.     // スライダー初期化（動的centerPadding対応版）
  469.     function initializeSlider() {
  470.         if (\$('.mycarousel-slider').hasClass('slick-initialized')) {
  471.             \$('.mycarousel-slider').slick('unslick');
  472.         }
  474.         const initialPadding = calculateCenterPadding();
  475.         const windowWidth = \$(window).width();
  476.         const centerModeEnabled = windowWidth > 768;
  478.         \$('.mycarousel-slider').slick({
  479.             centerMode: centerModeEnabled,
  480.             centerPadding: initialPadding,
  481.             slidesToShow: 1,
  482.             autoplay: false, // 初期化時は自動再生を無効にして安定性を確保
  483.             autoplaySpeed: 5000,
  484.             arrows: true,
  485.             dots: true,
  486.             adaptiveHeight: false,
  487.             fade: false,
  488.             speed: 300
  489.             // responsive設定は削除（動的制御に切り替え）
  490.         });
  492.         // スライド変更時にクラスを更新
  493.         \$('.mycarousel-slider').on('afterChange', function(event, slick, currentSlide) {
  494.             updateSlideClasses();
  495.         });
  496.     }
  498.     // 動的な表示最適化メイン関数
  499.     function optimizeCarouselDisplay() {
  500.         const isMobile = \$(window).width() <= 768;
  501.         const config = isMobile ? RESPONSIVE_CONFIG.mobile : RESPONSIVE_CONFIG.desktop;
  502.         const \$currentImages = getCurrentImages();
  503.         
  504.         if (\$currentImages.length === 0) return;
  506.         // モバイル時は簡単な設定にする
  507.         if (isMobile) {
  508.             // モバイル時：width 100vw、height auto
  509.             \$('.mycarousel-slide').css({
  510.                 'height': 'auto',
  511.                 'width': '100vw'
  512.             });
  513.             \$currentImages.css({
  514.                 'width': '100%',
  515.                 'height': 'auto',
  516.                 'object-fit': 'contain',
  517.                 'position': 'relative'
  518.             });
  519.             
  520.             // 初期化完了後に自動再生を開始
  521.             if (isInitialized && \$('.mycarousel-slider').slick('slickGetOption', 'autoplay') === false) {
  522.                 \$('.mycarousel-slider').slick('slickSetOption', 'autoplay', true, true);
  523.             }
  524.             return;
  525.         }
  527.         const \$firstImage = \$currentImages.filter(':visible').first();
  528.         if (\$firstImage.length === 0 || !\$firstImage[0].complete || !\$firstImage[0].naturalWidth) {
  529.             return;
  530.         }
  532.         const imageWidth = \$firstImage[0].naturalWidth;
  533.         const imageHeight = \$firstImage[0].naturalHeight;
  534.         const imageAspectRatio = imageWidth / imageHeight;
  535.         
  536.         const containerWidth = \$('.mycarousel-wrapper').width();
  537.         const containerAspectRatio = config.targetAspectRatio;
  538.         
  539.         const maxRenderWidth = Math.min(imageWidth, containerWidth);
  540.         const maxRenderHeight = maxRenderWidth / imageAspectRatio;
  541.         
  542.         const viewportMinHeightPx = parseFloat(config.minHeight) * \$(window).height() / 100;
  543.         const viewportMaxHeightPx = parseFloat(config.maxHeight) * \$(window).height() / 100;
  544.         
  545.         let optimalHeight;
  546.         let objectFitMode = 'contain';
  548.         const aspectRatioDiff = Math.abs(imageAspectRatio - containerAspectRatio) / containerAspectRatio;
  550.         if (maxRenderHeight <= viewportMaxHeightPx && maxRenderHeight >= viewportMinHeightPx) {
  551.             optimalHeight = maxRenderHeight;
  552.         } else if (maxRenderHeight > viewportMaxHeightPx) {
  553.             if (aspectRatioDiff <= config.marginThreshold) {
  554.                 optimalHeight = viewportMaxHeightPx;
  555.             } else {
  556.                 optimalHeight = Math.min(containerWidth / imageAspectRatio, viewportMaxHeightPx);
  557.             }
  558.         } else {
  559.             if (maxRenderHeight < viewportMinHeightPx) {
  560.                 const scaleUpLimit = Math.min(2.0, viewportMinHeightPx / maxRenderHeight);
  561.                 if (scaleUpLimit <= 1.5) {
  562.                     optimalHeight = viewportMinHeightPx;
  563.                 } else {
  564.                     optimalHeight = maxRenderHeight;
  565.                 }
  566.             } else {
  567.                 optimalHeight = maxRenderHeight;
  568.             }
  569.         }
  571.         // 最終的な制限適用
  572.         optimalHeight = Math.max(viewportMinHeightPx, Math.min(viewportMaxHeightPx, optimalHeight));
  574.         // 画像の品質を考慮したobject-fit調整
  575.         const renderScale = optimalHeight / maxRenderHeight;
  576.         if (renderScale > 1.2) {
  577.             objectFitMode = 'contain';
  578.         } else {
  579.             objectFitMode = 'contain';
  580.         }
  582.         // スタイル適用（デスクトップのみ）
  583.         \$('.mycarousel-slide').css('height', optimalHeight + 'px');
  584.         \$currentImages.css({
  585.             'object-fit': objectFitMode,
  586.             'image-rendering': renderScale > 1.1 ? 'smooth' : 'auto'
  587.         });
  589.         // 初期化完了後に自動再生を開始
  590.         if (isInitialized && \$('.mycarousel-slider').slick('slickGetOption', 'autoplay') === false) {
  591.             \$('.mycarousel-slider').slick('slickSetOption', 'autoplay', true, true);
  592.         }
  593.     }
  595.     // スライドのクラスを更新する関数
  596.     function updateSlideClasses() {
  597.         \$('.mycarousel-slide').removeClass('center-slide side-slide');
  598.         
  599.         if (\$(window).width() > 768) {
  600.             \$('.slick-center .mycarousel-slide').addClass('center-slide');
  601.             \$('.slick-slide:not(.slick-center) .mycarousel-slide').addClass('side-slide');
  602.         } else {
  603.             \$('.mycarousel-slide').addClass('center-slide');
  604.         }
  605.     }
  607.     async function initialize() {
  608.         try {
  609.             // カルーセルを一時的に非表示にしてちらつき防止
  610.             \$('.mycarousel-wrapper').css('visibility', 'hidden');
  611.             
  612.             await preloadImages();
  613.             
  614.             initializeSlider();
  615.             
  616.             optimizeCarouselDisplay();
  617.             
  618.             updateSlideClasses();
  619.             
  620.             isInitialized = true;
  621.             
  622.             // 6. 少し待ってから表示（slickの初期化完了を確実にする）
  623.             setTimeout(() => {
  624.                 \$('.mycarousel-wrapper').css('visibility', 'visible');
  625.                 // 初期化後にもう一度表示を最適化
  626.                 optimizeCarouselDisplay();
  627.                 updateSlideClasses();
  628.             }, 50);
  629.             
  630.             console.log('Carousel initialized successfully');
  631.             
  632.         } catch (error) {
  633.             console.error('Carousel initialization failed:', error);
  634.             // エラー時も表示を戻す
  635.             \$('.mycarousel-wrapper').css('visibility', 'visible');
  636.         }
  637.     }
  639.     let resizeTimer;
  640.     \$(window).on('resize', function() {
  641.         clearTimeout(resizeTimer);
  642.         resizeTimer = setTimeout(async () => {
  643.             // centerPaddingを動的に更新
  644.             updateCenterPadding();
  645.             
  646.             // デバイス切り替わり時は再初期化
  647.             const newImages = getCurrentImages();
  648.             const imagesSwitched = !currentImages.length || 
  649.                 newImages.length !== currentImages.length ||
  650.                 newImages[0] !== currentImages[0];
  651.             
  652.             if (imagesSwitched) {
  653.                 currentImages = newImages;
  654.                 await preloadImages();
  655.             }
  656.             
  657.             optimizeCarouselDisplay();
  658.             updateSlideClasses();
  659.         }, 200);
  660.     });
  661.     
  662.     \$(document).ready(function() {
  663.         currentImages = getCurrentImages();
  664.         initialize();
  665.     });
  666.     
  667.     \$(window).on('load', function() {
  668.         if (!isInitialized) {
  669.             initialize();
  670.         }
  671.     });
  672. });
  673. </script>
  674. ";
  675.         
  676.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  678.         
  679.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  681.     }
  683.     public function getTemplateName()
  684.     {
  685.         return "index.twig";
  686.     }
  688.     public function isTraitable()
  689.     {
  690.         return false;
  691.     }
  693.     public function getDebugInfo()
  694.     {
  695.         return array (  360 => 233,  350 => 232,  172 => 63,  162 => 62,  150 => 59,  143 => 57,  138 => 55,  133 => 54,  127 => 51,  123 => 50,  116 => 49,  114 => 48,  111 => 47,  107 => 46,  104 => 45,  101 => 44,  98 => 42,  95 => 35,  92 => 33,  89 => 25,  86 => 23,  83 => 16,  80 => 14,  77 => 7,  73 => 4,  63 => 3,  52 => 1,  50 => 2,  37 => 1,);
  696.     }
  698.     public function getSourceContext()
  699.     {
  700.         return new Source("{% extends 'default_frame.twig' %}
  701. {% set body_class = 'front_page' %}
  702. {% block main %}
  703. <div class=\"mycarousel-wrapper\">
  704.     <div class=\"mycarousel-slider\">
  705.         {# PC用画像リスト #}
  706.         {% set pc_images = [
  707.             'main-visual.jpg',
  708.             'S__23207939.jpg',
  709.             'NaiPC.jpg',
  710.             'caPC.jpg',
  711.             'panPC.jpg'
  712.         ] %}
  713.         
  714.         {# SP用画像リスト #}
  715.         {% set sp_images = [
  716.             'sp-topImages.jpg',
  717.             'S__23224325.jpg',
  718.             'NaiSP.jpg',
  719.             'caSP.jpg',
  720.             'panSP.jpg'
  721.         ] %}
  722.         
  723.         {# リンク先URLリスト（画像の順番に対応） #}
  724.         {% set link_urls = [
  725.             'https://iseyabread.com/',
  726.             'https://iseyabread.com/',
  727.             'https://iseyabread.com/products/detail/10',
  728.             'https://iseyabread.com/products/detail/7',            
  729.             'https://iseyabread.com/products/detail/9'
  730.         
  731.         ] %}
  732.         
  733.         {# リンクターゲット設定（_self: 同じタブ, _blank: 新しいタブ） #}
  734.         {% set link_targets = [
  735.             '_self',
  736.             '_self',
  737.             '_self',            
  738.             '_self',            
  739.             '_self',
  740.         ] %}
  741.         
  742.         {# 実際に表示する画像を選択（0から始まるインデックス番号で指定） #}
  743.         {% set display_images = [0,1,2,3,4] %}
  744.         
  745.         {% for index in display_images %}
  746.             <div class=\"mycarousel-slide\">
  747.                 {% if link_urls[index] %}
  748.                     <a href=\"{{ link_urls[index] }}\" target=\"{{ link_targets[index] ?? '_self' }}\" class=\"carousel-link\">
  749.                         <img class=\"desktop-image\" src=\"{{ asset('/html/user_data/ContentImg/' ~ pc_images[index]) }}\" alt=\"スライド画像\">
  750.                         <img class=\"mobile-image\" src=\"{{ asset('/html/user_data/ContentImg/' ~ sp_images[index]) }}\" alt=\"スライド画像\">
  751.                     </a>
  752.                 {% else %}
  753.                     <img class=\"desktop-image\" src=\"{{ asset('/html/user_data/ContentImg/' ~ pc_images[index]) }}\" alt=\"スライド画像\">
  754.                     <img class=\"mobile-image\" src=\"{{ asset('/html/user_data/ContentImg/' ~ sp_images[index]) }}\" alt=\"スライド画像\">
  755.                 {% endif %}
  756.             </div>
  757.         {% endfor %}
  758.     </div>
  759. </div>
  760. {% endblock %}
  761. {% block stylesheet %}
  762. <style>
  763. /* slickのデフォルト黒丸（before擬似要素）を無効化 */
  764. .mycarousel-slider .slick-dots li button::before {
  765.     display: none;
  766.     content: '';
  767. }
  768. .slick-dots li {
  769.     position:unset;
  770.     display: inline-block;
  771.     width: 20px;
  772.     height: 20px;
  773.     margin: 0 5px;
  774.     padding: 0;
  775.     cursor: pointer;
  776. }
  777. .mycarousel-slider .slick-dots li {
  778.     width: 10px;
  779.     height: 10px;
  780. }
  781. .mycarousel-slider .slick-dots li button {
  782.     width: 100%;
  783.     height: 100%;
  784.     padding: 0;
  785.     border: none;
  786.     border-radius: 50%;
  787.     background-color: #ccc;
  788.     opacity: 0.7;
  789.     transition: all 0.3s ease;
  790.     font-size: 0;
  791.     cursor: pointer;
  792. }
  793. .mycarousel-slider .slick-dots li.slick-active button {
  794.     background-color: #b8860b;
  795.     transform: scale(1.3);
  796.     opacity: 1;
  797. }
  799. /* カルーセルリンクのスタイル */
  800. .carousel-link {
  801.     display: block;
  802.     position: relative;
  803.     width: 100%;
  804.     height: 100%;
  805.     text-decoration: none;
  806.     cursor: pointer;
  807.     transition: opacity 0.3s ease;
  808. }
  810. .carousel-link:hover {
  811.     opacity: 0.9;
  812. }
  814. .mycarousel-wrapper {
  815.     width: 100vw;
  816.     max-width: none;
  817.     margin-left: calc(-50vw + 50%);
  818.     margin-right: calc(-50vw + 50%);
  819.     overflow: hidden;
  820.     padding: 0;
  821.     /* 初期化時のちらつき防止 */
  822.     visibility: hidden;
  823. }
  825. .slick-track {
  826.     display: flex !important;
  827.     align-items: center;
  828. }
  829. .slick-slide {
  830.     padding: 0 !important;
  831.     margin: 0 !important;
  832. }
  834. /* スライド本体（動的高さ対応） */
  835. .mycarousel-slide {
  836.     box-sizing: border-box;
  837.     padding: 0 !important;
  838.     margin: 0 !important;
  839.     position: relative;
  840.     transition: all 0.5s ease;
  841.     overflow: hidden;
  842.     height: 60vh; /* 初期値：JavaScript で調整される */
  843. }
  845. /* 画像の基本スタイル */
  846. .desktop-image,
  847. .mobile-image {
  848.     position: absolute;
  849.     top: 0;
  850.     left: 0;
  851.     width: 100%;
  852.     height: 100%;
  853.     transition: all 0.5s ease;
  854.     /* object-fit は JavaScript で動的に調整 */
  855.     object-fit: contain;
  856. }
  858. /* デスクトップ時のスタイル（768pxより大きい） */
  859. @media (min-width: 769px) {
  860.     .desktop-image {
  861.         display: block !important;
  862.     }
  863.     .mobile-image {
  864.         display: none !important;
  865.     }
  866. }
  868. /* モバイル時のスタイル（768px以下） */
  869. @media (max-width: 768px) {
  870.     .mycarousel-wrapper {
  871.         width: 100vw;
  872.         margin-left: calc(-50vw + 50%);
  873.         margin-right: calc(-50vw + 50%);
  874.     }
  875.     
  876.     .mycarousel-slide {
  877.         width: 100vw !important;
  878.         height: auto !important;
  879.         padding: 0 !important;
  880.         margin: 0 !important;
  881.         opacity: 1 !important;
  882.         filter: none !important;
  883.     }
  885.     .desktop-image {
  886.         display: none !important;
  887.     }
  888.     
  889.     .mobile-image {
  890.         display: block !important;
  891.         position: relative !important;
  892.         width: 100% !important;
  893.         height: auto !important;
  894.         object-fit: contain !important;
  895.         filter: brightness(1) contrast(1) !important;
  896.     }
  897. }
  899. /* 左右の画像を暗くするエフェクト（デスクトップのみ） */
  900. @media (min-width: 769px) {
  901.     .mycarousel-slide.side-slide {
  902.         opacity: 0.6;
  903.     }
  904.     .mycarousel-slide.side-slide .desktop-image {
  905.         filter: brightness(0.7) contrast(0.9);
  906.     }
  907.     .mycarousel-slide.center-slide {
  908.         opacity: 1;
  909.     }
  910.     .mycarousel-slide.center-slide .desktop-image {
  911.         filter: brightness(1) contrast(1);
  912.     }
  913.     .mycarousel-slide.side-slide:hover {
  914.         opacity: 0.8;
  915.         transform: scale(1.02);
  916.     }
  917.     .mycarousel-slide.side-slide:hover .desktop-image {
  918.         filter: brightness(0.85) contrast(0.95);
  919.     }
  920. }
  922. /* 動的高さ調整用のユーティリティクラス */
  923. .dynamic-fit-contain {
  924.     object-fit: contain;
  925. }
  926. .dynamic-fit-cover {
  927.     object-fit: cover;
  928. }
  929. </style>
  930. {% endblock %}
  931. {% block javascript %}
  932. <script>
  933. \$(function() {
  934.     // 動的レスポンシブ設定
  935.     const RESPONSIVE_CONFIG = {
  936.         desktop: {
  937.             targetAspectRatio: 16/9,
  938.             minHeight: '30vh',
  939.             maxHeight: '60vh',
  940.             marginThreshold: 0.15
  941.         },
  942.         mobile: {
  943.             targetAspectRatio: 4/3,
  944.             minHeight: '35vh',
  945.             maxHeight: '85vh',
  946.             marginThreshold: 0.12
  947.         }
  948.     };
  950.     let isInitialized = false;
  951.     let currentImages = [];
  953.     // 画面幅に応じた動的centerPadding計算
  954.     function calculateCenterPadding() {
  955.         const windowWidth = \$(window).width();
  956.         let padding;
  957.         
  958.         // 画面幅に応じてcenterPaddingを計算（調整可能な閾値）
  959.         if (windowWidth <= 768) {
  960.             // モバイル: 余白なし
  961.             padding = '0';
  962.         } else if (windowWidth <= 1024) {
  963.             // タブレット: 小さめの余白
  964.             padding = '8vw';
  965.         } else if (windowWidth <= 1200) {
  966.             // 小型デスクトップ: 中程度の余白
  967.             padding = '12vw';
  968.         }else if (windowWidth <= 1440) {
  969.             // 小型デスクトップ: 中程度の余白
  970.             padding = '15vw';
  971.         
  972.         } else if (windowWidth <= 1920) {
  973.             // 標準デスクトップ: やや大きめの余白
  974.             padding = '20vw';
  975.         } else {
  976.             // 大型ディスプレイ: 最大余白を制限
  977.             padding = '25vw';
  978.         }
  979.         
  980.         return padding;
  981.     }
  983.     // centerPaddingを動的に更新する関数
  984.     function updateCenterPadding() {
  985.         const newPadding = calculateCenterPadding();
  986.         const windowWidth = \$(window).width();
  987.         
  988.         // モバイルはcenterMode自体を無効にする
  989.         const centerModeEnabled = windowWidth > 768;
  990.         
  991.         if (\$('.mycarousel-slider').hasClass('slick-initialized')) {
  992.             \$('.mycarousel-slider').slick('slickSetOption', 'centerMode', centerModeEnabled, false);
  993.             \$('.mycarousel-slider').slick('slickSetOption', 'centerPadding', newPadding, true);
  994.         }
  995.     }
  997.     // 現在のデバイスに応じた画像を取得
  998.     function getCurrentImages() {
  999.         const isMobile = \$(window).width() <= 768;
  1000.         return isMobile ? \$('.mobile-image') : \$('.desktop-image');
  1001.     }
  1003.     // 画像プリロード関数
  1004.     function preloadImages() {
  1005.         return new Promise((resolve) => {
  1006.             const images = getCurrentImages();
  1007.             let loadedCount = 0;
  1008.             const totalImages = images.length;
  1010.             if (totalImages === 0) {
  1011.                 resolve();
  1012.                 return;
  1013.             }
  1015.             images.each(function() {
  1016.                 const img = this;
  1017.                 
  1018.                 if (img.complete && img.naturalWidth > 0) {
  1019.                     loadedCount++;
  1020.                     if (loadedCount >= totalImages) {
  1021.                         resolve();
  1022.                     }
  1023.                 } else {
  1024.                     \$(img).on('load error', function() {
  1025.                         loadedCount++;
  1026.                         if (loadedCount >= totalImages) {
  1027.                             resolve();
  1028.                         }
  1029.                     });
  1030.                     
  1031.                     // 強制的に再読み込みをトリガー（キャッシュ対策）
  1032.                     if (!img.src) {
  1033.                         img.src = img.getAttribute('src');
  1034.                     }
  1035.                 }
  1036.             });
  1037.         });
  1038.     }
  1040.     // スライダー初期化（動的centerPadding対応版）
  1041.     function initializeSlider() {
  1042.         if (\$('.mycarousel-slider').hasClass('slick-initialized')) {
  1043.             \$('.mycarousel-slider').slick('unslick');
  1044.         }
  1046.         const initialPadding = calculateCenterPadding();
  1047.         const windowWidth = \$(window).width();
  1048.         const centerModeEnabled = windowWidth > 768;
  1050.         \$('.mycarousel-slider').slick({
  1051.             centerMode: centerModeEnabled,
  1052.             centerPadding: initialPadding,
  1053.             slidesToShow: 1,
  1054.             autoplay: false, // 初期化時は自動再生を無効にして安定性を確保
  1055.             autoplaySpeed: 5000,
  1056.             arrows: true,
  1057.             dots: true,
  1058.             adaptiveHeight: false,
  1059.             fade: false,
  1060.             speed: 300
  1061.             // responsive設定は削除（動的制御に切り替え）
  1062.         });
  1064.         // スライド変更時にクラスを更新
  1065.         \$('.mycarousel-slider').on('afterChange', function(event, slick, currentSlide) {
  1066.             updateSlideClasses();
  1067.         });
  1068.     }
  1070.     // 動的な表示最適化メイン関数
  1071.     function optimizeCarouselDisplay() {
  1072.         const isMobile = \$(window).width() <= 768;
  1073.         const config = isMobile ? RESPONSIVE_CONFIG.mobile : RESPONSIVE_CONFIG.desktop;
  1074.         const \$currentImages = getCurrentImages();
  1075.         
  1076.         if (\$currentImages.length === 0) return;
  1078.         // モバイル時は簡単な設定にする
  1079.         if (isMobile) {
  1080.             // モバイル時：width 100vw、height auto
  1081.             \$('.mycarousel-slide').css({
  1082.                 'height': 'auto',
  1083.                 'width': '100vw'
  1084.             });
  1085.             \$currentImages.css({
  1086.                 'width': '100%',
  1087.                 'height': 'auto',
  1088.                 'object-fit': 'contain',
  1089.                 'position': 'relative'
  1090.             });
  1091.             
  1092.             // 初期化完了後に自動再生を開始
  1093.             if (isInitialized && \$('.mycarousel-slider').slick('slickGetOption', 'autoplay') === false) {
  1094.                 \$('.mycarousel-slider').slick('slickSetOption', 'autoplay', true, true);
  1095.             }
  1096.             return;
  1097.         }
  1099.         const \$firstImage = \$currentImages.filter(':visible').first();
  1100.         if (\$firstImage.length === 0 || !\$firstImage[0].complete || !\$firstImage[0].naturalWidth) {
  1101.             return;
  1102.         }
  1104.         const imageWidth = \$firstImage[0].naturalWidth;
  1105.         const imageHeight = \$firstImage[0].naturalHeight;
  1106.         const imageAspectRatio = imageWidth / imageHeight;
  1107.         
  1108.         const containerWidth = \$('.mycarousel-wrapper').width();
  1109.         const containerAspectRatio = config.targetAspectRatio;
  1110.         
  1111.         const maxRenderWidth = Math.min(imageWidth, containerWidth);
  1112.         const maxRenderHeight = maxRenderWidth / imageAspectRatio;
  1113.         
  1114.         const viewportMinHeightPx = parseFloat(config.minHeight) * \$(window).height() / 100;
  1115.         const viewportMaxHeightPx = parseFloat(config.maxHeight) * \$(window).height() / 100;
  1116.         
  1117.         let optimalHeight;
  1118.         let objectFitMode = 'contain';
  1120.         const aspectRatioDiff = Math.abs(imageAspectRatio - containerAspectRatio) / containerAspectRatio;
  1122.         if (maxRenderHeight <= viewportMaxHeightPx && maxRenderHeight >= viewportMinHeightPx) {
  1123.             optimalHeight = maxRenderHeight;
  1124.         } else if (maxRenderHeight > viewportMaxHeightPx) {
  1125.             if (aspectRatioDiff <= config.marginThreshold) {
  1126.                 optimalHeight = viewportMaxHeightPx;
  1127.             } else {
  1128.                 optimalHeight = Math.min(containerWidth / imageAspectRatio, viewportMaxHeightPx);
  1129.             }
  1130.         } else {
  1131.             if (maxRenderHeight < viewportMinHeightPx) {
  1132.                 const scaleUpLimit = Math.min(2.0, viewportMinHeightPx / maxRenderHeight);
  1133.                 if (scaleUpLimit <= 1.5) {
  1134.                     optimalHeight = viewportMinHeightPx;
  1135.                 } else {
  1136.                     optimalHeight = maxRenderHeight;
  1137.                 }
  1138.             } else {
  1139.                 optimalHeight = maxRenderHeight;
  1140.             }
  1141.         }
  1143.         // 最終的な制限適用
  1144.         optimalHeight = Math.max(viewportMinHeightPx, Math.min(viewportMaxHeightPx, optimalHeight));
  1146.         // 画像の品質を考慮したobject-fit調整
  1147.         const renderScale = optimalHeight / maxRenderHeight;
  1148.         if (renderScale > 1.2) {
  1149.             objectFitMode = 'contain';
  1150.         } else {
  1151.             objectFitMode = 'contain';
  1152.         }
  1154.         // スタイル適用（デスクトップのみ）
  1155.         \$('.mycarousel-slide').css('height', optimalHeight + 'px');
  1156.         \$currentImages.css({
  1157.             'object-fit': objectFitMode,
  1158.             'image-rendering': renderScale > 1.1 ? 'smooth' : 'auto'
  1159.         });
  1161.         // 初期化完了後に自動再生を開始
  1162.         if (isInitialized && \$('.mycarousel-slider').slick('slickGetOption', 'autoplay') === false) {
  1163.             \$('.mycarousel-slider').slick('slickSetOption', 'autoplay', true, true);
  1164.         }
  1165.     }
  1167.     // スライドのクラスを更新する関数
  1168.     function updateSlideClasses() {
  1169.         \$('.mycarousel-slide').removeClass('center-slide side-slide');
  1170.         
  1171.         if (\$(window).width() > 768) {
  1172.             \$('.slick-center .mycarousel-slide').addClass('center-slide');
  1173.             \$('.slick-slide:not(.slick-center) .mycarousel-slide').addClass('side-slide');
  1174.         } else {
  1175.             \$('.mycarousel-slide').addClass('center-slide');
  1176.         }
  1177.     }
  1179.     async function initialize() {
  1180.         try {
  1181.             // カルーセルを一時的に非表示にしてちらつき防止
  1182.             \$('.mycarousel-wrapper').css('visibility', 'hidden');
  1183.             
  1184.             await preloadImages();
  1185.             
  1186.             initializeSlider();
  1187.             
  1188.             optimizeCarouselDisplay();
  1189.             
  1190.             updateSlideClasses();
  1191.             
  1192.             isInitialized = true;
  1193.             
  1194.             // 6. 少し待ってから表示（slickの初期化完了を確実にする）
  1195.             setTimeout(() => {
  1196.                 \$('.mycarousel-wrapper').css('visibility', 'visible');
  1197.                 // 初期化後にもう一度表示を最適化
  1198.                 optimizeCarouselDisplay();
  1199.                 updateSlideClasses();
  1200.             }, 50);
  1201.             
  1202.             console.log('Carousel initialized successfully');
  1203.             
  1204.         } catch (error) {
  1205.             console.error('Carousel initialization failed:', error);
  1206.             // エラー時も表示を戻す
  1207.             \$('.mycarousel-wrapper').css('visibility', 'visible');
  1208.         }
  1209.     }
  1211.     let resizeTimer;
  1212.     \$(window).on('resize', function() {
  1213.         clearTimeout(resizeTimer);
  1214.         resizeTimer = setTimeout(async () => {
  1215.             // centerPaddingを動的に更新
  1216.             updateCenterPadding();
  1217.             
  1218.             // デバイス切り替わり時は再初期化
  1219.             const newImages = getCurrentImages();
  1220.             const imagesSwitched = !currentImages.length || 
  1221.                 newImages.length !== currentImages.length ||
  1222.                 newImages[0] !== currentImages[0];
  1223.             
  1224.             if (imagesSwitched) {
  1225.                 currentImages = newImages;
  1226.                 await preloadImages();
  1227.             }
  1228.             
  1229.             optimizeCarouselDisplay();
  1230.             updateSlideClasses();
  1231.         }, 200);
  1232.     });
  1233.     
  1234.     \$(document).ready(function() {
  1235.         currentImages = getCurrentImages();
  1236.         initialize();
  1237.     });
  1238.     
  1239.     \$(window).on('load', function() {
  1240.         if (!isInitialized) {
  1241.             initialize();
  1242.         }
  1243.     });
  1244. });
  1245. </script>
  1246. {% endblock %}", "index.twig", "/home/iseyabread/www/iseya/app/template/default/index.twig");
  1247.     }
  1248. }