var/cache/dev/twig/1d/1d0e99653b8c5b2e212ad38505f4e0a2.php line 54

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_b2797e06df71b66f3cfaaf29a14770c4 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.             'stylesheet' => [$this, 'block_stylesheet'],
  29.             'javascript' => [$this, 'block_javascript'],
  30.             'main' => [$this, 'block_main'],
  31.         ];
  32.         $this->sandbox = $this->env->getExtension('\Twig\Extension\SandboxExtension');
  33.         $this->checkSecurity();
  34.     }
  36.     protected function doGetParent(array $context)
  37.     {
  38.         // line 11
  39.         return "default_frame.twig";
  40.     }
  42.     protected function doDisplay(array $context, array $blocks = [])
  43.     {
  44.         $macros = $this->macros;
  45.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  46.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "index.twig"));
  48.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  49.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "index.twig"));
  51.         // line 13
  52.         $context["body_class"] = "front_page";
  53.         // line 15
  54.         $context["NewsList"] = twig_get_attribute($this->env, $this->source, $this->env->getFunction('repository')->getCallable()("Eccube\\Entity\\News"), "getList", [], "method", false, false, true, 15);
  55.         // line 11
  56.         $this->parent = $this->loadTemplate("default_frame.twig", "index.twig", 11);
  57.         $this->parent->display($context, array_merge($this->blocks, $blocks));
  58.         
  59.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  61.         
  62.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  64.     }
  66.     // line 18
  67.     public function block_stylesheet($context, array $blocks = [])
  68.     {
  69.         $macros = $this->macros;
  70.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  71.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheet"));
  73.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  74.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheet"));
  76.         // line 19
  77.         echo "    <style>
  78.         .slick-slider{
  79.           height:100%;
  80.           width: 100%;
  81.           overflow: hidden;
  82.         }
  84.         .main_visual.slick-slider .slick-list,
  85.         .main_visual.slick-slider .slick-track,
  86.         .main_visual.slick-slider .slick-slide,
  87.         .main_visual.slick-slider .slick-track > .slick-slide > div,
  88.         .main_visual.slick-slider .slick-slide img{
  89.           height:100%;
  90.         }
  91.         .main_visual.slick-slider .slick-slide{
  92.           overflow:hidden;
  93.         }
  95.         .main_visual.slick-slider .slick-slide img{
  96.           opacity:0.8;
  97.         }
  99.         .main_visual.slick-slider:before {
  100.           background: rgba(60, 20, 0, .2);
  101.           content: '';
  102.           display: block;
  103.           height: 100%;
  104.           left: 0;
  105.           opacity: .6;
  106.           position: absolute;
  107.           top: 0;
  108.           width: 100%;
  109.           z-index: 10;
  110.         }
  112.         .main_visual.slick-slider:after {
  113.           background: linear-gradient(217deg, rgba(110, 72, 51, .6), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(241, 234, 230, .6), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(249, 247, 245, .6), rgba(0, 0, 255, 0) 70.71%);
  114.           content: '';
  115.           display: block;
  116.           height: 100%;
  117.           left: 0;
  118.           opacity: .6;
  119.           position: absolute;
  120.           top: 0;
  121.           width: 100%;
  122.           z-index: 5;
  123.         }
  125.         .slick-slide{
  126.           position:relative;
  127.         }
  129.       /* テキストのフェードインとスライドイン */
  130.       .main {
  131.           opacity: 0;
  132.           transform: translateX(10vw); /* 右からスライドイン */
  133.           transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  134.       }
  136.       .sub {
  137.           opacity: 0;
  138.           transform: translateX(10vw); /* 右からスライドイン */
  139.           transition: opacity 0.5s ease-in-out 0.3s, transform 0.5s ease-in-out 0.2s; /* 0.2秒遅れ */
  140.       }
  142.       .fade-in .main {
  143.           opacity: 1;
  144.           transform: translateX(0); /* 元の位置に戻る */
  145.       }
  147.       .fade-in .sub {
  148.           opacity: 1;
  149.           transform: translateX(0); /* 元の位置に戻る */
  150.       }
  152. /* 背景画像の設定 */
  153. .slick-slide {
  154.   overflow:hidden;
  155. }
  157. @-webkit-keyframes fadezoom {
  158.     0% {
  159.         transform: scale(1);
  160.     }
  161.     100% {
  162.         transform: scale(1.25);
  163.     }
  164. }
  166. @keyframes fadezoom {
  167.     0% {
  168.         transform: scale(1);
  169.     }
  170.     100% {
  171.         transform: scale(1.25);
  172.     }
  173. }
  175. .slick-animation {
  176.     animation: fadezoom 20s linear 0s normal both;
  177. }
  182.     </style>
  183. ";
  184.         
  185.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  187.         
  188.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  190.     }
  192.     // line 127
  193.     public function block_javascript($context, array $blocks = [])
  194.     {
  195.         $macros = $this->macros;
  196.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  197.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  199.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  200.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  202.         // line 128
  203.         echo "
  204.     <script>
  205.       \$(function() {
  206.         // メインスライダーの初期化時のイベント
  207.         \$('.main_visual').on('init', function () {
  208.           // 最初のスライドにアニメーションを適用
  209.           \$('.slick-slide[data-slick-index=\"0\"] img').addClass('slick-animation');
  210.         });
  212.         // メインスライダーの設定
  213.         \$('.main_visual').slick({
  214.           autoplay: true,          // 自動再生
  215.           infinite: true,          // 無限ループ
  216.           slidesToShow: 1,         // 1つのスライドを表示
  217.           slidesToScroll: 1,       // スライドを1つずつスクロール
  218.           arrows: false,           // 矢印を非表示
  219.           speed: 3000,             // フェードアニメーションの速度
  220.           autoplaySpeed: 5000,     // スライドが切り替わる間隔
  221.           pauseOnFocus: false,     // フォーカス時にスライドを一時停止しない
  222.           pauseOnHover: false,     // ホバー時にスライドを一時停止しない
  223.           asNavFor: '.text_slider' // .text_slider と同期
  224.         })
  225.         .on({
  226.           beforeChange: function(event, slick, currentSlide, nextSlide) {
  227.             // 次のスライドに 'slick-animation' クラスを追加
  228.             \$(\".main_visual .slick-slide[data-slick-index='\" + nextSlide + \"'] img\").addClass(\"slick-animation\");
  229.           },
  230.           afterChange: function(event, slick, currentSlide) {
  232.             // 前のスライドのインデックスを計算
  233.             var prevSlide = (currentSlide === 0) ? slick.slideCount - 1 : currentSlide - 1;
  234.             // 一つ前のスライドから 'slick-animation' クラスを削除
  235.             \$(\".main_visual .slick-slide[data-slick-index='\" + prevSlide + \"'] img\").removeClass(\"slick-animation\");
  236.           }
  237.         });
  239.         // テキストスライダーの初期化時のイベント
  240.         \$('.text_slider').on('init', function () {
  241.           // 最初のスライドに 'fade-in' クラスを適用
  242.           \$('.slick-slide[data-slick-index=\"0\"]').addClass('fade-in');
  243.         });
  245.         // テキストスライダーの設定（メインスライダーと同期）
  246.         \$('.text_slider').slick({
  247.           autoplay: true,          // 自動再生
  248.           infinite: true,          // 無限ループ
  249.           slidesToShow: 1,         // 1つのスライドを表示
  250.           slidesToScroll: 1,       // スライドを1つずつスクロール
  251.           fade: true,
  252.           speed: 1000,
  253.           autoplaySpeed: 5000,
  254.           arrows: false,
  255.           pauseOnFocus: false,
  256.           pauseOnHover: false,
  257.           pauseOnDotsHover: false,
  258.           asNavFor: '.main_visual' // .main_visual と同期
  259.         })
  260.         .on({
  261.           beforeChange: function(event, slick, currentSlide, nextSlide) {
  262.             // 次のスライドに 'fade-in' クラスを追加
  263.             \$(\".text_slider .slick-slide[data-slick-index='\" + nextSlide + \"']\").addClass(\"fade-in\");
  264.           },
  265.           afterChange: function(event, slick, currentSlide) {
  266.             // 現在のスライド以外のすべてのスライドから 'fade-in' クラスを削除
  267.             \$(\".text_slider .slick-slide\").not(\"[data-slick-index='\" + currentSlide + \"']\").not(\".slick-cloned\").removeClass(\"fade-in\");
  269.             // 現在のスライドにクラスを確実に追加
  270.            \$(\".text_slider .slick-slide[data-slick-index='\" + currentSlide + \"']\").addClass(\"fade-in\");
  271.           }
  272.         });
  273.       });
  277.       \$(function() {
  278.           \$('.topic_slider').slick({
  279.               vertical: true,
  280.               autoplay: true,
  281.               autoplaySpeed: 3800,
  282.               speed: 800,
  283.               arrows: true,
  284.               pauseOnFocus: false,
  285.               pauseOnHover: false,
  286.               pauseOnDotsHover: false
  287.           });
  290.             \$('.ec-sliderRole__news').each(function() {
  291.                 var listLength = \$(this).find('.ec-sliderRole__newsItem').length;
  292.                 if (listLength > 5) {
  293.                     \$(this).find('.ec-sliderRole__newsItem:gt(4)').each(function() {
  294.                         \$(this).hide();
  295.                     });
  296.                     \$(this).append('<a id=\"news_readmore\" class=\"ec-inlineBtn--top\">";
  297.         // line 221
  298.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\TranslationExtension']->trans("more"), "html", null, true);
  299.         echo "</a>');
  300.                     var dispNum = 5;
  301.                     \$(this).find('#news_readmore').click(function() {
  302.                         dispNum += 5;
  303.                         \$(this).parent().find('.ec-sliderRole__newsItem:lt(' + dispNum + ')').show();
  304.                         if (dispNum >= listLength) {
  305.                             \$(this).hide();
  306.                         }
  307.                     })
  308.                 }
  309.             });
  311.       });
  312.     </script>
  313. ";
  314.         
  315.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  317.         
  318.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  320.     }
  322.     // line 237
  323.     public function block_main($context, array $blocks = [])
  324.     {
  325.         $macros = $this->macros;
  326.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  327.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
  329.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  330.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
  332.         // line 238
  333.         echo "    <div class=\"ec-sliderRole\">
  334.       <div class=\"ec-sliderRole__wrap\">
  336.         <div class=\"mv__wrap\">
  337.           <div class=\"main_visual\">
  338.               <div class=\"item slick-slide\">
  339.                 <img src=\"";
  340.         // line 244
  341.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/top/01.jpg"), "html", null, true);
  342.         echo "\" class=\"outset\">
  343.               </div>
  344.               <div class=\"item slick-slide\">
  345.                 <img src=\"";
  346.         // line 247
  347.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/top/02.jpg"), "html", null, true);
  348.         echo "\" class=\"outset\">
  349.               </div>
  350.               <div class=\"item slick-slide\">
  351.                 <img src=\"";
  352.         // line 250
  353.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/top/03.jpg"), "html", null, true);
  354.         echo "\" class=\"outset\">
  355.               </div>
  356.               <div class=\"item slick-slide\">
  357.                 <img src=\"";
  358.         // line 253
  359.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/top/04.jpg"), "html", null, true);
  360.         echo "\" class=\"outset\">
  361.               </div>
  362.           </div>
  364.           <div class=\"text_slider\">
  365.             <div class=\"ec-sliderRole__title\">
  366.               <div class=\"main\">Lillie and</div>
  367.               <div class=\"sub\">Garcello</div>
  368.             </div>
  369.             <div class=\"ec-sliderRole__title\">
  370.               <div class=\"main\">ORIGINAL</div>
  371.               <div class=\"sub\">GOODS</div>
  372.             </div>
  373.             <div class=\"ec-sliderRole__title\">
  374.               <div class=\"main\">RECOMMENDED</div>
  375.               <div class=\"sub\">ITEM</div>
  376.             </div>
  377.             <div class=\"ec-sliderRole__title\">
  378.               <div class=\"main\">LIMITED</div>
  379.               <div class=\"sub\">SET</div>
  380.             </div>
  381.           </div>
  383.         </div>
  386.         <div class=\"ec-sliderRole__news topic_slider\">
  387.             ";
  388.         // line 280
  389.         $context['_parent'] = $context;
  390.         $context['_seq'] = twig_ensure_traversable((isset($context["NewsList"]) || array_key_exists("NewsList", $context) ? $context["NewsList"] : (function () { throw new RuntimeError('Variable "NewsList" does not exist.', 280, $this->source); })()));
  391.         foreach ($context['_seq'] as $context["_key"] => $context["News"]) {
  392.             // line 281
  393.             echo "                <a href=";
  394.             echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("news_detail", ["id" => twig_get_attribute($this->env, $this->source, $context["News"], "id", [], "any", false, false, true, 281)]), "html", null, true);
  395.             echo " class=\"ec-sliderRole__newsItem\" target=\"_blank\">
  396.                     <div class=\"ec-sliderRole__newsHeading\">
  397.                         <div class=\"ec-sliderRole__newsDate\">
  398.                             ";
  399.             // line 284
  400.             echo twig_escape_filter($this->env, $this->extensions['Eccube\Twig\Extension\IntlExtension']->date_day($this->env, $this->sandbox->ensureToStringAllowed(twig_get_attribute($this->env, $this->source, $context["News"], "publish_date", [], "any", false, false, true, 284), 284, $this->source)), "html", null, true);
  401.             echo "
  402.                         </div>
  403.                         <div class=\"ec-sliderRole__newsColumn\">
  404.                             <div class=\"ec-sliderRole__newsTitle\">
  405.                                 ";
  406.             // line 288
  407.             echo twig_escape_filter($this->env, $this->sandbox->ensureToStringAllowed(twig_get_attribute($this->env, $this->source, $context["News"], "title", [], "any", false, false, true, 288), 288, $this->source), "html", null, true);
  408.             echo "
  409.                             </div>
  410.                             ";
  411.             // line 297
  412.             echo "                        </div>
  413.                     </div>
  414.                     ";
  415.             // line 306
  416.             echo "                </a>
  417.             ";
  418.         }
  419.         $_parent = $context['_parent'];
  420.         unset($context['_seq'], $context['_iterated'], $context['_key'], $context['News'], $context['_parent'], $context['loop']);
  421.         $context = array_intersect_key($context, $_parent) + $_parent;
  422.         // line 308
  423.         echo "        </div>
  426.       </div>
  427.     </div>
  428. ";
  429.         
  430.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  432.         
  433.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  435.     }
  437.     public function getTemplateName()
  438.     {
  439.         return "index.twig";
  440.     }
  442.     public function isTraitable()
  443.     {
  444.         return false;
  445.     }
  447.     public function getDebugInfo()
  448.     {
  449.         return array (  423 => 308,  416 => 306,  412 => 297,  407 => 288,  400 => 284,  393 => 281,  389 => 280,  359 => 253,  353 => 250,  347 => 247,  341 => 244,  333 => 238,  323 => 237,  298 => 221,  203 => 128,  193 => 127,  77 => 19,  67 => 18,  56 => 11,  54 => 15,  52 => 13,  39 => 11,);
  450.     }
  452.     public function getSourceContext()
  453.     {
  454.         return new Source("{#
  455. This file is part of EC-CUBE
  457. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  459. http://www.ec-cube.co.jp/
  461. For the full copyright and license information, please view the LICENSE
  462. file that was distributed with this source code.
  463. #}
  464. {% extends 'default_frame.twig' %}
  466. {% set body_class = 'front_page' %}
  468. {% set NewsList = repository('Eccube\\\\Entity\\\\News').getList() %}
  471. {% block stylesheet %}
  472.     <style>
  473.         .slick-slider{
  474.           height:100%;
  475.           width: 100%;
  476.           overflow: hidden;
  477.         }
  479.         .main_visual.slick-slider .slick-list,
  480.         .main_visual.slick-slider .slick-track,
  481.         .main_visual.slick-slider .slick-slide,
  482.         .main_visual.slick-slider .slick-track > .slick-slide > div,
  483.         .main_visual.slick-slider .slick-slide img{
  484.           height:100%;
  485.         }
  486.         .main_visual.slick-slider .slick-slide{
  487.           overflow:hidden;
  488.         }
  490.         .main_visual.slick-slider .slick-slide img{
  491.           opacity:0.8;
  492.         }
  494.         .main_visual.slick-slider:before {
  495.           background: rgba(60, 20, 0, .2);
  496.           content: '';
  497.           display: block;
  498.           height: 100%;
  499.           left: 0;
  500.           opacity: .6;
  501.           position: absolute;
  502.           top: 0;
  503.           width: 100%;
  504.           z-index: 10;
  505.         }
  507.         .main_visual.slick-slider:after {
  508.           background: linear-gradient(217deg, rgba(110, 72, 51, .6), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(241, 234, 230, .6), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(249, 247, 245, .6), rgba(0, 0, 255, 0) 70.71%);
  509.           content: '';
  510.           display: block;
  511.           height: 100%;
  512.           left: 0;
  513.           opacity: .6;
  514.           position: absolute;
  515.           top: 0;
  516.           width: 100%;
  517.           z-index: 5;
  518.         }
  520.         .slick-slide{
  521.           position:relative;
  522.         }
  524.       /* テキストのフェードインとスライドイン */
  525.       .main {
  526.           opacity: 0;
  527.           transform: translateX(10vw); /* 右からスライドイン */
  528.           transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  529.       }
  531.       .sub {
  532.           opacity: 0;
  533.           transform: translateX(10vw); /* 右からスライドイン */
  534.           transition: opacity 0.5s ease-in-out 0.3s, transform 0.5s ease-in-out 0.2s; /* 0.2秒遅れ */
  535.       }
  537.       .fade-in .main {
  538.           opacity: 1;
  539.           transform: translateX(0); /* 元の位置に戻る */
  540.       }
  542.       .fade-in .sub {
  543.           opacity: 1;
  544.           transform: translateX(0); /* 元の位置に戻る */
  545.       }
  547. /* 背景画像の設定 */
  548. .slick-slide {
  549.   overflow:hidden;
  550. }
  552. @-webkit-keyframes fadezoom {
  553.     0% {
  554.         transform: scale(1);
  555.     }
  556.     100% {
  557.         transform: scale(1.25);
  558.     }
  559. }
  561. @keyframes fadezoom {
  562.     0% {
  563.         transform: scale(1);
  564.     }
  565.     100% {
  566.         transform: scale(1.25);
  567.     }
  568. }
  570. .slick-animation {
  571.     animation: fadezoom 20s linear 0s normal both;
  572. }
  577.     </style>
  578. {% endblock %}
  580. {% block javascript %}
  582.     <script>
  583.       \$(function() {
  584.         // メインスライダーの初期化時のイベント
  585.         \$('.main_visual').on('init', function () {
  586.           // 最初のスライドにアニメーションを適用
  587.           \$('.slick-slide[data-slick-index=\"0\"] img').addClass('slick-animation');
  588.         });
  590.         // メインスライダーの設定
  591.         \$('.main_visual').slick({
  592.           autoplay: true,          // 自動再生
  593.           infinite: true,          // 無限ループ
  594.           slidesToShow: 1,         // 1つのスライドを表示
  595.           slidesToScroll: 1,       // スライドを1つずつスクロール
  596.           arrows: false,           // 矢印を非表示
  597.           speed: 3000,             // フェードアニメーションの速度
  598.           autoplaySpeed: 5000,     // スライドが切り替わる間隔
  599.           pauseOnFocus: false,     // フォーカス時にスライドを一時停止しない
  600.           pauseOnHover: false,     // ホバー時にスライドを一時停止しない
  601.           asNavFor: '.text_slider' // .text_slider と同期
  602.         })
  603.         .on({
  604.           beforeChange: function(event, slick, currentSlide, nextSlide) {
  605.             // 次のスライドに 'slick-animation' クラスを追加
  606.             \$(\".main_visual .slick-slide[data-slick-index='\" + nextSlide + \"'] img\").addClass(\"slick-animation\");
  607.           },
  608.           afterChange: function(event, slick, currentSlide) {
  610.             // 前のスライドのインデックスを計算
  611.             var prevSlide = (currentSlide === 0) ? slick.slideCount - 1 : currentSlide - 1;
  612.             // 一つ前のスライドから 'slick-animation' クラスを削除
  613.             \$(\".main_visual .slick-slide[data-slick-index='\" + prevSlide + \"'] img\").removeClass(\"slick-animation\");
  614.           }
  615.         });
  617.         // テキストスライダーの初期化時のイベント
  618.         \$('.text_slider').on('init', function () {
  619.           // 最初のスライドに 'fade-in' クラスを適用
  620.           \$('.slick-slide[data-slick-index=\"0\"]').addClass('fade-in');
  621.         });
  623.         // テキストスライダーの設定（メインスライダーと同期）
  624.         \$('.text_slider').slick({
  625.           autoplay: true,          // 自動再生
  626.           infinite: true,          // 無限ループ
  627.           slidesToShow: 1,         // 1つのスライドを表示
  628.           slidesToScroll: 1,       // スライドを1つずつスクロール
  629.           fade: true,
  630.           speed: 1000,
  631.           autoplaySpeed: 5000,
  632.           arrows: false,
  633.           pauseOnFocus: false,
  634.           pauseOnHover: false,
  635.           pauseOnDotsHover: false,
  636.           asNavFor: '.main_visual' // .main_visual と同期
  637.         })
  638.         .on({
  639.           beforeChange: function(event, slick, currentSlide, nextSlide) {
  640.             // 次のスライドに 'fade-in' クラスを追加
  641.             \$(\".text_slider .slick-slide[data-slick-index='\" + nextSlide + \"']\").addClass(\"fade-in\");
  642.           },
  643.           afterChange: function(event, slick, currentSlide) {
  644.             // 現在のスライド以外のすべてのスライドから 'fade-in' クラスを削除
  645.             \$(\".text_slider .slick-slide\").not(\"[data-slick-index='\" + currentSlide + \"']\").not(\".slick-cloned\").removeClass(\"fade-in\");
  647.             // 現在のスライドにクラスを確実に追加
  648.            \$(\".text_slider .slick-slide[data-slick-index='\" + currentSlide + \"']\").addClass(\"fade-in\");
  649.           }
  650.         });
  651.       });
  655.       \$(function() {
  656.           \$('.topic_slider').slick({
  657.               vertical: true,
  658.               autoplay: true,
  659.               autoplaySpeed: 3800,
  660.               speed: 800,
  661.               arrows: true,
  662.               pauseOnFocus: false,
  663.               pauseOnHover: false,
  664.               pauseOnDotsHover: false
  665.           });
  668.             \$('.ec-sliderRole__news').each(function() {
  669.                 var listLength = \$(this).find('.ec-sliderRole__newsItem').length;
  670.                 if (listLength > 5) {
  671.                     \$(this).find('.ec-sliderRole__newsItem:gt(4)').each(function() {
  672.                         \$(this).hide();
  673.                     });
  674.                     \$(this).append('<a id=\"news_readmore\" class=\"ec-inlineBtn--top\">{{ 'more'|trans }}</a>');
  675.                     var dispNum = 5;
  676.                     \$(this).find('#news_readmore').click(function() {
  677.                         dispNum += 5;
  678.                         \$(this).parent().find('.ec-sliderRole__newsItem:lt(' + dispNum + ')').show();
  679.                         if (dispNum >= listLength) {
  680.                             \$(this).hide();
  681.                         }
  682.                     })
  683.                 }
  684.             });
  686.       });
  687.     </script>
  688. {% endblock javascript %}
  690. {% block main %}
  691.     <div class=\"ec-sliderRole\">
  692.       <div class=\"ec-sliderRole__wrap\">
  694.         <div class=\"mv__wrap\">
  695.           <div class=\"main_visual\">
  696.               <div class=\"item slick-slide\">
  697.                 <img src=\"{{ asset('assets/img/top/01.jpg') }}\" class=\"outset\">
  698.               </div>
  699.               <div class=\"item slick-slide\">
  700.                 <img src=\"{{ asset('assets/img/top/02.jpg') }}\" class=\"outset\">
  701.               </div>
  702.               <div class=\"item slick-slide\">
  703.                 <img src=\"{{ asset('assets/img/top/03.jpg') }}\" class=\"outset\">
  704.               </div>
  705.               <div class=\"item slick-slide\">
  706.                 <img src=\"{{ asset('assets/img/top/04.jpg') }}\" class=\"outset\">
  707.               </div>
  708.           </div>
  710.           <div class=\"text_slider\">
  711.             <div class=\"ec-sliderRole__title\">
  712.               <div class=\"main\">Lillie and</div>
  713.               <div class=\"sub\">Garcello</div>
  714.             </div>
  715.             <div class=\"ec-sliderRole__title\">
  716.               <div class=\"main\">ORIGINAL</div>
  717.               <div class=\"sub\">GOODS</div>
  718.             </div>
  719.             <div class=\"ec-sliderRole__title\">
  720.               <div class=\"main\">RECOMMENDED</div>
  721.               <div class=\"sub\">ITEM</div>
  722.             </div>
  723.             <div class=\"ec-sliderRole__title\">
  724.               <div class=\"main\">LIMITED</div>
  725.               <div class=\"sub\">SET</div>
  726.             </div>
  727.           </div>
  729.         </div>
  732.         <div class=\"ec-sliderRole__news topic_slider\">
  733.             {% for News in NewsList %}
  734.                 <a href={{ url('news_detail',  {'id': News.id}) }} class=\"ec-sliderRole__newsItem\" target=\"_blank\">
  735.                     <div class=\"ec-sliderRole__newsHeading\">
  736.                         <div class=\"ec-sliderRole__newsDate\">
  737.                             {{ News.publish_date|date_day }}
  738.                         </div>
  739.                         <div class=\"ec-sliderRole__newsColumn\">
  740.                             <div class=\"ec-sliderRole__newsTitle\">
  741.                                 {{ News.title }}
  742.                             </div>
  743.                             {# {% if News.description or News.url %}
  744.                                 <div class=\"ec-sliderRole__newsClose\">
  745.                                     <a class=\"ec-sliderRole__newsCloseBtn\">
  746.                                         <i class=\"fas fa-angle-down\"></i>
  747.                                     </a>
  748.                                 </div>
  749.                             {% endif %} #}
  750.                         </div>
  751.                     </div>
  752.                     {# <div class=\"ec-sliderRole__newsDescription\">
  753.                         {{ News.description|raw|nl2br }}
  754.                         {% if News.url %}
  755.                             <br>
  756.                             <a href=\"{{ News.url }}\" {% if News.link_method == '1' %}target=\"_blank\"{% endif %}>{{ '詳しくはこちら'|trans }}</a>
  757.                         {% endif %}
  758.                     </div> #}
  759.                 </a>
  760.             {% endfor %}
  761.         </div>
  764.       </div>
  765.     </div>
  766. {% endblock %}
  770. ", "index.twig", "/home/egonet/c-bcl.com/public_html/shop/app/template/lag/index.twig");
  771.     }
  772.     
  773.     public function checkSecurity()
  774.     {
  775.         static $tags = array("set" => 13, "for" => 280);
  776.         static $filters = array("escape" => 221, "trans" => 221, "date_day" => 284);
  777.         static $functions = array("repository" => 15, "asset" => 244, "url" => 281);
  779.         try {
  780.             $this->sandbox->checkSecurity(
  781.                 ['set', 'for'],
  782.                 ['escape', 'trans', 'date_day'],
  783.                 ['repository', 'asset', 'url']
  784.             );
  785.         } catch (SecurityError $e) {
  786.             $e->setSourceContext($this->source);
  788.             if ($e instanceof SecurityNotAllowedTagError && isset($tags[$e->getTagName()])) {
  789.                 $e->setTemplateLine($tags[$e->getTagName()]);
  790.             } elseif ($e instanceof SecurityNotAllowedFilterError && isset($filters[$e->getFilterName()])) {
  791.                 $e->setTemplateLine($filters[$e->getFilterName()]);
  792.             } elseif ($e instanceof SecurityNotAllowedFunctionError && isset($functions[$e->getFunctionName()])) {
  793.                 $e->setTemplateLine($functions[$e->getFunctionName()]);
  794.             }
  796.             throw $e;
  797.         }
  799.     }
  800. }