app/template/lag/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'front_page' %}
  15. {% set NewsList = repository('Eccube\\Entity\\News').getList() %}
  18. {% block stylesheet %}
  19.     <style>
  20.         .slick-slider{
  21.           height:100%;
  22.           width: 100%;
  23.           overflow: hidden;
  24.         }
  26.         .main_visual.slick-slider .slick-list,
  27.         .main_visual.slick-slider .slick-track,
  28.         .main_visual.slick-slider .slick-slide,
  29.         .main_visual.slick-slider .slick-track > .slick-slide > div,
  30.         .main_visual.slick-slider .slick-slide img{
  31.           height:100%;
  32.         }
  33.         .main_visual.slick-slider .slick-slide{
  34.           overflow:hidden;
  35.         }
  37.         .main_visual.slick-slider .slick-slide img{
  38.           opacity:0.8;
  39.         }
  41.         .main_visual.slick-slider:before {
  42.           background: rgba(60, 20, 0, .2);
  43.           content: '';
  44.           display: block;
  45.           height: 100%;
  46.           left: 0;
  47.           opacity: .6;
  48.           position: absolute;
  49.           top: 0;
  50.           width: 100%;
  51.           z-index: 10;
  52.         }
  54.         .main_visual.slick-slider:after {
  55.           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%);
  56.           content: '';
  57.           display: block;
  58.           height: 100%;
  59.           left: 0;
  60.           opacity: .6;
  61.           position: absolute;
  62.           top: 0;
  63.           width: 100%;
  64.           z-index: 5;
  65.         }
  67.         .slick-slide{
  68.           position:relative;
  69.         }
  71.       /* テキストのフェードインとスライドイン */
  72.       .main {
  73.           opacity: 0;
  74.           transform: translateX(10vw); /* 右からスライドイン */
  75.           transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  76.       }
  78.       .sub {
  79.           opacity: 0;
  80.           transform: translateX(10vw); /* 右からスライドイン */
  81.           transition: opacity 0.5s ease-in-out 0.3s, transform 0.5s ease-in-out 0.2s; /* 0.2秒遅れ */
  82.       }
  84.       .fade-in .main {
  85.           opacity: 1;
  86.           transform: translateX(0); /* 元の位置に戻る */
  87.       }
  89.       .fade-in .sub {
  90.           opacity: 1;
  91.           transform: translateX(0); /* 元の位置に戻る */
  92.       }
  94. /* 背景画像の設定 */
  95. .slick-slide {
  96.   overflow:hidden;
  97. }
  99. @-webkit-keyframes fadezoom {
  100.     0% {
  101.         transform: scale(1);
  102.     }
  103.     100% {
  104.         transform: scale(1.25);
  105.     }
  106. }
  108. @keyframes fadezoom {
  109.     0% {
  110.         transform: scale(1);
  111.     }
  112.     100% {
  113.         transform: scale(1.25);
  114.     }
  115. }
  117. .slick-animation {
  118.     animation: fadezoom 20s linear 0s normal both;
  119. }
  124.     </style>
  125. {% endblock %}
  127. {% block javascript %}
  129.     <script>
  130.       $(function() {
  131.         // メインスライダーの初期化時のイベント
  132.         $('.main_visual').on('init', function () {
  133.           // 最初のスライドにアニメーションを適用
  134.           $('.slick-slide[data-slick-index="0"] img').addClass('slick-animation');
  135.         });
  137.         // メインスライダーの設定
  138.         $('.main_visual').slick({
  139.           autoplay: true,          // 自動再生
  140.           infinite: true,          // 無限ループ
  141.           slidesToShow: 1,         // 1つのスライドを表示
  142.           slidesToScroll: 1,       // スライドを1つずつスクロール
  143.           arrows: false,           // 矢印を非表示
  144.           speed: 3000,             // フェードアニメーションの速度
  145.           autoplaySpeed: 5000,     // スライドが切り替わる間隔
  146.           pauseOnFocus: false,     // フォーカス時にスライドを一時停止しない
  147.           pauseOnHover: false,     // ホバー時にスライドを一時停止しない
  148.           asNavFor: '.text_slider' // .text_slider と同期
  149.         })
  150.         .on({
  151.           beforeChange: function(event, slick, currentSlide, nextSlide) {
  152.             // 次のスライドに 'slick-animation' クラスを追加
  153.             $(".main_visual .slick-slide[data-slick-index='" + nextSlide + "'] img").addClass("slick-animation");
  154.           },
  155.           afterChange: function(event, slick, currentSlide) {
  157.             // 前のスライドのインデックスを計算
  158.             var prevSlide = (currentSlide === 0) ? slick.slideCount - 1 : currentSlide - 1;
  159.             // 一つ前のスライドから 'slick-animation' クラスを削除
  160.             $(".main_visual .slick-slide[data-slick-index='" + prevSlide + "'] img").removeClass("slick-animation");
  161.           }
  162.         });
  164.         // テキストスライダーの初期化時のイベント
  165.         $('.text_slider').on('init', function () {
  166.           // 最初のスライドに 'fade-in' クラスを適用
  167.           $('.slick-slide[data-slick-index="0"]').addClass('fade-in');
  168.         });
  170.         // テキストスライダーの設定（メインスライダーと同期）
  171.         $('.text_slider').slick({
  172.           autoplay: true,          // 自動再生
  173.           infinite: true,          // 無限ループ
  174.           slidesToShow: 1,         // 1つのスライドを表示
  175.           slidesToScroll: 1,       // スライドを1つずつスクロール
  176.           fade: true,
  177.           speed: 1000,
  178.           autoplaySpeed: 5000,
  179.           arrows: false,
  180.           pauseOnFocus: false,
  181.           pauseOnHover: false,
  182.           pauseOnDotsHover: false,
  183.           asNavFor: '.main_visual' // .main_visual と同期
  184.         })
  185.         .on({
  186.           beforeChange: function(event, slick, currentSlide, nextSlide) {
  187.             // 次のスライドに 'fade-in' クラスを追加
  188.             $(".text_slider .slick-slide[data-slick-index='" + nextSlide + "']").addClass("fade-in");
  189.           },
  190.           afterChange: function(event, slick, currentSlide) {
  191.             // 現在のスライド以外のすべてのスライドから 'fade-in' クラスを削除
  192.             $(".text_slider .slick-slide").not("[data-slick-index='" + currentSlide + "']").not(".slick-cloned").removeClass("fade-in");
  194.             // 現在のスライドにクラスを確実に追加
  195.            $(".text_slider .slick-slide[data-slick-index='" + currentSlide + "']").addClass("fade-in");
  196.           }
  197.         });
  198.       });
  202.       $(function() {
  203.           $('.topic_slider').slick({
  204.               vertical: true,
  205.               autoplay: true,
  206.               autoplaySpeed: 3800,
  207.               speed: 800,
  208.               arrows: true,
  209.               pauseOnFocus: false,
  210.               pauseOnHover: false,
  211.               pauseOnDotsHover: false
  212.           });
  215.             $('.ec-sliderRole__news').each(function() {
  216.                 var listLength = $(this).find('.ec-sliderRole__newsItem').length;
  217.                 if (listLength > 5) {
  218.                     $(this).find('.ec-sliderRole__newsItem:gt(4)').each(function() {
  219.                         $(this).hide();
  220.                     });
  221.                     $(this).append('<a id="news_readmore" class="ec-inlineBtn--top">{{ 'more'|trans }}</a>');
  222.                     var dispNum = 5;
  223.                     $(this).find('#news_readmore').click(function() {
  224.                         dispNum += 5;
  225.                         $(this).parent().find('.ec-sliderRole__newsItem:lt(' + dispNum + ')').show();
  226.                         if (dispNum >= listLength) {
  227.                             $(this).hide();
  228.                         }
  229.                     })
  230.                 }
  231.             });
  233.       });
  234.     </script>
  235. {% endblock javascript %}
  237. {% block main %}
  238.     <div class="ec-sliderRole">
  239.       <div class="ec-sliderRole__wrap">
  241.         <div class="mv__wrap">
  242.           <div class="main_visual">
  243.               <div class="item slick-slide">
  244.                 <img src="{{ asset('assets/img/top/01.jpg') }}" class="outset">
  245.               </div>
  246.               <div class="item slick-slide">
  247.                 <img src="{{ asset('assets/img/top/02.jpg') }}" class="outset">
  248.               </div>
  249.               <div class="item slick-slide">
  250.                 <img src="{{ asset('assets/img/top/03.jpg') }}" class="outset">
  251.               </div>
  252.               <div class="item slick-slide">
  253.                 <img src="{{ asset('assets/img/top/04.jpg') }}" class="outset">
  254.               </div>
  255.           </div>
  257.           <div class="text_slider">
  258.             <div class="ec-sliderRole__title">
  259.               <div class="main">Lillie and</div>
  260.               <div class="sub">Garcello</div>
  261.             </div>
  262.             <div class="ec-sliderRole__title">
  263.               <div class="main">ORIGINAL</div>
  264.               <div class="sub">GOODS</div>
  265.             </div>
  266.             <div class="ec-sliderRole__title">
  267.               <div class="main">RECOMMENDED</div>
  268.               <div class="sub">ITEM</div>
  269.             </div>
  270.             <div class="ec-sliderRole__title">
  271.               <div class="main">LIMITED</div>
  272.               <div class="sub">SET</div>
  273.             </div>
  274.           </div>
  276.         </div>
  279.         <div class="ec-sliderRole__news topic_slider">
  280.             {% for News in NewsList %}
  281.                 <a href={{ url('news_detail',  {'id': News.id}) }} class="ec-sliderRole__newsItem" target="_blank">
  282.                     <div class="ec-sliderRole__newsHeading">
  283.                         <div class="ec-sliderRole__newsDate">
  284.                             {{ News.publish_date|date_day }}
  285.                         </div>
  286.                         <div class="ec-sliderRole__newsColumn">
  287.                             <div class="ec-sliderRole__newsTitle">
  288.                                 {{ News.title }}
  289.                             </div>
  290.                             {# {% if News.description or News.url %}
  291.                                 <div class="ec-sliderRole__newsClose">
  292.                                     <a class="ec-sliderRole__newsCloseBtn">
  293.                                         <i class="fas fa-angle-down"></i>
  294.                                     </a>
  295.                                 </div>
  296.                             {% endif %} #}
  297.                         </div>
  298.                     </div>
  299.                     {# <div class="ec-sliderRole__newsDescription">
  300.                         {{ News.description|raw|nl2br }}
  301.                         {% if News.url %}
  302.                             <br>
  303.                             <a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}>{{ '詳しくはこちら'|trans }}</a>
  304.                         {% endif %}
  305.                     </div> #}
  306.                 </a>
  307.             {% endfor %}
  308.         </div>
  311.       </div>
  312.     </div>
  313. {% endblock %}