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.     }
  91. @supports (content-visibility: auto) {
  92.   .top-ranking,
  93.   .ec-role.top-ranking,
  94.   .news, .top-news, .ec-newsRole,
  95.   footer {
  96.     content-visibility: auto;
  97.     contain-intrinsic-size: 800px;
  98.   }
  99. }
  100. @media (max-width: 767px) {
  101.   .main_visual {
  102.     aspect-ratio: 640 / 360;
  103.   }
  104.   .ec-newsRole {
  105.     min-height: 600px;
  106.   }
  107. }
  108. .fa, .fas {
  109.   width: 1em;
  110.   display: inline-block;
  111. }
  113. </style>
  114. {% endblock %}
  116. {% block javascript %}
  117. <script>
  118.   document.addEventListener('DOMContentLoaded', function () {
  119.     if (!(window.jQuery && jQuery.fn && jQuery.fn.slick)) return;
  121.     var $mv = $('.main_visual');
  123.     if (!$mv.hasClass('slick-initialized')) {
  124.       $mv.slick({
  125.         dots: true,
  126.         arrows: false,
  127.         autoplay: true,
  128.         speed: 300,
  129.         lazyLoad: 'ondemand'
  130.       });
  131.     }
  132.   });
  133. </script>
  135. {% endblock javascript %}
  137. {% block main %}
  138. <div class="ec-sliderRole">
  139.     <div class="main_visual">
  140.         <div class="item">
  141.             <a href="{{ url('homepage') }}campaign/summer-campaign"
  142.                 onClick="ga('send','event','click','top', 'slide_2026smr' ,1,{'nonInteraction':1});">
  143.                 <picture>
  144.                     <source media="(max-width: 767px)" type="image/webp"
  145.                         srcset="{{ asset('assets/img/top/bnr_2026smr_800w.webp') }}">
  146.                     <source media="(max-width: 767px)"
  147.                         srcset="{{ asset('assets/img/top/bnr_2026smr_800w.jpg') }}">
  148.                     <source type="image/webp"
  149.                         srcset="{{ asset('assets/img/top/bnr_2026smr_1090w.webp') }}">
  150.                     <img src="{{ asset('assets/img/top/bnr_2026smr_1090w.jpg') }}" alt="夏まとめ買いキャンペーン 最大20%OFF" width="1090" height="450" fetchpriority="high" style="width:100%;height:auto;">
  151.                 </picture>
  152.             </a>
  153.         </div>
  155.         <div class="item">
  156.             <a href="{{ url('homepage') }}healthfood/collagen-2set"
  157.                 onClick="ga('send','event','click','top', 'slide_cox2' ,1,{'nonInteraction':1});">
  158.                 <picture>
  159.                     <source media="(max-width: 767px)" type="image/webp"
  160.                         srcset="{{ asset('assets/img/top/bnr_cox2_800w.webp') }}">
  161.                     <source media="(max-width: 767px)"
  162.                         srcset="{{ asset('assets/img/top/bnr_cox2_800w.jpg') }}">
  163.                     <source type="image/webp"
  164.                         srcset="{{ asset('assets/img/top/bnr_cox2_1090w.webp') }}">
  165.                     <img src="{{ asset('assets/img/top/bnr_cox2_1090w.jpg') }}" alt="コラーゲン2個セット・送料無料8000円" width="1090" height="392" fetchpriority="high"  style="width:100%;height:auto;">
  166.                 </picture>
  167.             </a>
  168.         </div>
  173.         <div class="item">
  174.             <a href="{{ url('homepage') }}goods/perfect-lifty"
  175.                 onClick="ga('send','event','click','top', 'slide_pl' ,1,{'nonInteraction':1});">
  176.                 <picture>
  177.                     <source media="(max-width: 767px)" type="image/webp"
  178.                         srcset="{{ asset('assets/img/top/bnr_pl_800w.webp') }}">
  179.                     <source media="(max-width: 767px)"
  180.                         srcset="{{ asset('assets/img/top/bnr_pl_800w.jpg') }}">
  181.                     <source type="image/webp"
  182.                         srcset="{{ asset('assets/img/top/bnr_pl_1090w.webp') }}">
  183.                     <img src="{{ asset('assets/img/top/bnr_pl_1090w.jpg') }}" alt="【3回撫でて5秒でピンハリ】パーフェクトリフティ" width="1090" height="392" fetchpriority="high"  style="width:100%;height:auto;">
  184.                 </picture>
  185.             </a>
  186.         </div>
  188.         <div class="item">
  189.             <a href="{{ url('homepage') }}goods/hot-bubble"
  190.                 onClick="ga('send','event','click','top', 'slide_5252milkx3' ,1,{'nonInteraction':1});">
  191.                 <picture>
  192.                     <source media="(max-width: 767px)" type="image/webp"
  193.                         srcset="{{ asset('assets/img/top/bnr_hb_800w.webp') }}">
  194.                     <source media="(max-width: 767px)"
  195.                         srcset="{{ asset('assets/img/top/bnr_hb_800w.jpg') }}">
  196.                     <source type="image/webp"
  197.                         srcset="{{ asset('assets/img/top/bnr_hb_1090w.webp') }}">
  198.                     <img src="{{ asset('assets/img/top/bnr_hb_1090w.jpg') }}" alt="Hot Bubble PRO（ホットバブルプロ）" width="1090" height="392" fetchpriority="high"  style="width:100%;height:auto;">
  199.                 </picture>
  200.             </a>
  201.         </div>
  203.         <div class="item">
  204.             <a href="{{ url('homepage') }}health-trend/dashsyoku"
  205.                 onClick="ga('send','event','click','top', 'slide_dash' ,1,{'nonInteraction':1});">
  206.                 <picture>
  207.                     <source media="(max-width: 767px)" type="image/webp"
  208.                         srcset="{{ asset('assets/img/top/bnr_dash_800w.webp') }}">
  209.                     <source media="(max-width: 767px)"
  210.                         srcset="{{ asset('assets/img/top/bnr_dash_800w.jpg') }}">
  211.                     <source type="image/webp"
  212.                         srcset="{{ asset('assets/img/top/bnr_dash_1090w.webp') }}">
  213.                     <img src="{{ asset('assets/img/top/bnr_dash_1090w.jpg') }}" alt="DASH食" width="1090" height="392" fetchpriority="high"  style="width:100%;height:auto;">
  214.                 </picture>
  215.             </a>
  216.         </div>
  217.     </div>
  218. </div>
  220. {% endblock %}