app/template/million01/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. {% block stylesheet %}
  16. <style>
  17.     .slick-slider {
  18.         margin-bottom: 30px;
  19.     }
  21.     .slick-dots {
  22.         position: absolute;
  23.         bottom: -45px;
  24.         display: block;
  25.         width: 100%;
  26.         padding: 0;
  27.         list-style: none;
  28.         text-align: center;
  29.     }
  31.     .slick-dots li {
  32.         position: relative;
  33.         display: inline-block;
  34.         width: 20px;
  35.         height: 20px;
  36.         margin: 0 5px;
  37.         padding: 0;
  39.         cursor: pointer;
  40.     }
  42.     .slick-dots li button {
  43.         font-size: 0;
  44.         line-height: 0;
  45.         display: block;
  46.         width: 20px;
  47.         height: 20px;
  48.         padding: 5px;
  49.         cursor: pointer;
  50.         color: transparent;
  51.         border: 0;
  52.         outline: none;
  53.         background: transparent;
  54.     }
  56.     .slick-dots li button:hover,
  57.     .slick-dots li button:focus {
  58.         outline: none;
  59.     }
  61.     .slick-dots li button:hover:before,
  62.     .slick-dots li button:focus:before {
  63.         opacity: 1;
  64.     }
  66.     .slick-dots li button:before {
  67.         content: " ";
  68.         line-height: 20px;
  69.         position: absolute;
  70.         top: 0;
  71.         left: 0;
  72.         width: 12px;
  73.         height: 12px;
  74.         text-align: center;
  75.         opacity: .25;
  76.         background-color: black;
  77.         border-radius: 50%;
  79.     }
  81.     .slick-dots li.slick-active button:before {
  82.         opacity: .75;
  83.         background-color: black;
  84.     }
  86.     .slick-dots li button.thumbnail img {
  87.         width: 0;
  88.         height: 0;
  89.     }
  90. </style>
  91. {% endblock %}
  93. {% block javascript %}
  94. <script>
  95.   $(function () {
  97.     function fixHeroImagePriority($slider) {
  98.       // いったん全部lazy（clone含めて事故防止）
  99.       $slider.find('.slick-slide img')
  100.         .attr('loading', 'lazy')
  101.         .removeAttr('fetchpriority');
  103.       // 表示中だけ eager + high
  104.       $slider.find('.slick-slide.slick-current img')
  105.         .attr('loading', 'eager')
  106.         .attr('fetchpriority', 'high');
  107.     }
  109.     var $mv = $('.main_visual');
  111.     $mv
  112.       .on('init', function () { fixHeroImagePriority($mv); })
  113.       .on('afterChange', function () { fixHeroImagePriority($mv); })
  114.       .slick({
  115.         dots: true,
  116.         arrows: false,
  117.         autoplay: true,
  118.         speed: 300
  119.         // 余裕あれば：, lazyLoad: 'ondemand'
  120.       });
  122.     // 念のため保険
  123.     setTimeout(function(){ fixHeroImagePriority($mv); }, 0);
  124.   });
  125. </script>
  127. {% endblock javascript %}
  129. {% block main %}
  130. <div class="ec-sliderRole">
  131. <div class="main_visual">
  132.     <div class="item">
  133.         <a href="{{ url('homepage') }}goods/locomo-cream-2set"
  134.             onClick="ga('send','event','click','top', 'slide_locomox2' ,1,{'nonInteraction':1});">
  135.             <picture>
  136.                 <source media="(max-width: 767px)" type="image/webp"
  137.                     srcset="{{ asset('assets/img/top/bnr_locomox2_750x390.webp') }}">
  138.                 <source media="(max-width: 767px)"
  139.                     srcset="{{ asset('assets/img/top/bnr_locomox2_750x390.jpg') }}">
  140.                 <source type="image/webp"
  141.                     srcset="{{ asset('assets/img/top/bnr_locomox2_1000x360.webp') }}">
  142.                 <img
  143.                     src="{{ asset('assets/img/top/bnr_locomox2_1000x360.jpg') }}"
  144.                     alt="ロコモクリーム331　2個セット"
  145.                     width="1000" height="360"
  146.                     style="width:100%;height:auto;"
  147.                     loading="lazy">
  148.             </picture>
  149.         </a>
  150.     </div>
  152.     <div class="item">
  153.         <a href="{{ url('homepage') }}healthfood/tsukudani"
  154.             onClick="ga('send','event','click','top', 'slide_tsukudani' ,1,{'nonInteraction':1});">
  155.             <picture>
  156.                 <source media="(max-width: 767px)" type="image/webp"
  157.                     srcset="{{ asset('assets/img/top/bnr_tsukudani_750x390.webp') }}">
  158.                 <source media="(max-width: 767px)"
  159.                     srcset="{{ asset('assets/img/top/bnr_tsukudani_750x390.jpg') }}">
  160.                 <source type="image/webp"
  161.                     srcset="{{ asset('assets/img/top/bnr_tsukudani_1000x360.webp') }}">
  162.                 <img
  163.                     src="{{ asset('assets/img/top/bnr_tsukudani_1000x360.jpg') }}"
  164.                     alt="ミリオン佃煮3点セット"
  165.                     width="1000" height="360"
  166.                     style="width:100%;height:auto;"
  167.                     loading="lazy">
  168.             </picture>
  169.         </a>
  170.     </div>
  172.     <div class="item">
  173.         <a href="{{ url('homepage') }}goods/beauty-box"
  174.             onClick="ga('send','event','click','top', 'slide_amane' ,1,{'nonInteraction':1});">
  175.             <picture>
  176.                 <source media="(max-width: 767px)" type="image/webp"
  177.                     srcset="{{ asset('assets/img/top/bnr_amane_750x390.webp') }}">
  178.                 <source media="(max-width: 767px)"
  179.                     srcset="{{ asset('assets/img/top/bnr_amane_750x390.jpg') }}">
  180.                 <source type="image/webp"
  181.                     srcset="{{ asset('assets/img/top/bnr_amane_1000x360.webp') }}">
  182.                 <img
  183.                     src="{{ asset('assets/img/top/bnr_amane_1000x360.jpg') }}"
  184.                     alt="amaneジュエリービューティーボックス"
  185.                     width="1000" height="360"
  186.                     style="width:100%;height:auto;"
  187.                     loading="lazy">
  188.             </picture>
  189.         </a>
  190.     </div>
  192.     <div class="item">
  193.         <a href="{{ url('homepage') }}health-trend/dashsyoku"
  194.             onClick="ga('send','event','click','top', 'slide_dash' ,1,{'nonInteraction':1});">
  195.             <picture>
  196.                 <source media="(max-width: 767px)" type="image/webp"
  197.                     srcset="{{ asset('assets/img/top/bnr_dash_750x390.webp') }}">
  198.                 <source media="(max-width: 767px)"
  199.                     srcset="{{ asset('assets/img/top/bnr_dash_750x390.jpg') }}">
  200.                 <source type="image/webp"
  201.                     srcset="{{ asset('assets/img/top/bnr_dash_1000x360.webp') }}">
  202.                 <img
  203.                     src="{{ asset('assets/img/top/bnr_dash_1000x360.jpg') }}"
  204.                     alt="DASH食"
  205.                     width="1000" height="360"
  206.                     style="width:100%;height:auto;"
  207.                     loading="lazy">
  208.             </picture>
  209.         </a>
  210.     </div>
  212.     <div class="item">
  213.         <a href="{{ url('homepage') }}health-trend/beta-carotene"
  214.             onClick="ga('send','event','click','top', 'slide_carotene' ,1,{'nonInteraction':1});">
  215.             <picture>
  216.                 <source media="(max-width: 767px)" type="image/webp"
  217.                     srcset="{{ asset('assets/img/top/bnr_carotene_750x390.webp') }}">
  218.                 <source media="(max-width: 767px)"
  219.                     srcset="{{ asset('assets/img/top/bnr_carotene_750x390.jpg') }}">
  220.                 <source type="image/webp"
  221.                     srcset="{{ asset('assets/img/top/bnr_carotene_1000x360.webp') }}">
  222.                 <img
  223.                     src="{{ asset('assets/img/top/bnr_carotene_1000x360.jpg') }}"
  224.                     alt="β-カロテンで今日からできる美肌作り"
  225.                     width="1000" height="360"
  226.                     style="width:100%;height:auto;"
  227.                     loading="lazy">
  228.             </picture>
  229.         </a>
  230.     </div>
  232.     <div class="item">
  233.         <a href="{{ url('homepage') }}vegetable-juice/sdgs-episode"
  234.             onClick="ga('send','event','click','top', 'slide_sdgs' ,1,{'nonInteraction':1});">
  235.             <picture>
  236.                 <source media="(max-width: 767px)" type="image/webp"
  237.                     srcset="{{ asset('assets/img/top/bnr_sdgs_750x390.webp') }}">
  238.                 <source media="(max-width: 767px)"
  239.                     srcset="{{ asset('assets/img/top/bnr_sdgs_750x390.png') }}">
  240.                 <source type="image/webp"
  241.                     srcset="{{ asset('assets/img/top/bnr_sdgs_1000x360.webp') }}">
  242.                 <img
  243.                     src="{{ asset('assets/img/top/bnr_sdgs_1000x360.png') }}"
  244.                     alt="SDGs達成のため、「食品ロス」を減らそう、なくそう。"
  245.                     width="1000" height="360"
  246.                     style="width:100%;height:auto;"
  247.                     loading="lazy">
  248.             </picture>
  249.         </a>
  250.     </div>
  251. </div>
  253. </div>
  254. {% endblock %}