app/template/default/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-dots {
  18.       position: absolute;
  19.       bottom: -30px;
  20.       display: block;
  21.       width: 100%;
  22.       padding: 0;
  23.       list-style: none;
  24.       text-align: center;
  25.     }
  27.     .slick-dots li {
  28.       position: relative;
  29.       display: inline-block;
  30.       width: 20px;
  31.       height: 20px;
  32.       margin: 0;
  33.       padding: 0;
  35.       cursor: pointer;
  36.     }
  38.     .slick-dots li button {
  39.       font-size: 0;
  40.       line-height: 0;
  41.       display: block;
  42.       width: 20px;
  43.       height: 20px;
  44.       padding: 5px;
  45.       cursor: pointer;
  46.       color: transparent;
  47.       border: 0;
  48.       outline: none;
  49.       background: transparent;
  50.     }
  52.     .slick-dots li button:hover,
  53.     .slick-dots li button:focus {
  54.       outline: none;
  55.     }
  57.     .slick-dots li button:hover:before,
  58.     .slick-dots li button:focus:before {
  59.       opacity: 1;
  60.     }
  62.     .slick-dots li button:before {
  63.       content: " ";
  64.       line-height: 20px;
  65.       position: absolute;
  66.       top: 0;
  67.       left: 0;
  68.       width: 10px;
  69.       height: 10px;
  70.       text-align: center;
  71.       opacity: .25;
  72.       background-color: #999999;
  73.       border-radius: 50%;
  75.     }
  77.     .slick-dots li.slick-active button:before {
  78.       opacity: .75;
  79.       background-color: #999999;
  80.     }
  82.     .slick-dots li button.thumbnail img {
  83.       width: 0;
  84.       height: 0;
  85.     }
  86.   </style>
  87. {% endblock %}
  89. {% block javascript %}
  90.   <script>
  91.     $('.masaito-slide').slick({
  92.         dots: true, 
  93.         infinite: true, 
  94.         speed: 1500, 
  95.         slidesToShow: 1, 
  96.         slidesToScroll: 1,
  97.         autoplay: true,
  98.         autoplaySpeed: 3000,
  99.         pauseOnHover: false,
  100.         prevArrow: '<button type="button" class="slick-prev tes"><img src="{{ asset('assets/icon/prev.png') }}" alt="pre"></button>',
  101.         nextArrow: '<button type="button" class="slick-next tess"><img src="{{ asset('assets/icon/next.png') }}" alt="next"></button>'
  102.     });
  103.   </script>
  104. {% endblock javascript %}
  106. {% block main %}
  107.   <div class="ec-sliderRole">
  108.     <div class="main_visual">
  109.       <div class="item slick-slide">
  110.         <a href="{{ url('homepage') }}page/special/bib2026-tokyo-crazy-party/">
  111.           <img src="/user_data/main_banner/top/pc_BIBlive2026_1024_400_2.jpg" alt="BIB 2026 Tokyo Crazy Party" class="slide-img-pc">
  112.           <img src="/user_data/main_banner/top/pc_BIBlive2026_1024_400_2.jpg" alt="BIB 2026 Tokyo Crazy Party" class="slide-img-sp">
  113.         </a>
  114.       </div>
  115.       <div class="item slick-slide">
  116.         <a href="{{ url('homepage') }}page/special/marilyn-manson-oaud2/">
  117.           <img src="/user_data/main_banner/top/pc_Mason_1024_400_2.jpg" alt="Marilyn Manson" class="slide-img-pc">
  118.           <img src="/user_data/main_banner/top/pc_Mason_1024_400_2.jpg" alt="Marilyn Manson" class="slide-img-sp">
  119.         </a>
  120.       </div>
  121.       <div class="item slick-slide">
  122.       <a href="{{ url('product_list') }}?group_id=7828">
  123.         <img src="/user_data/main_banner/rock/pc_Asia2026_1024_400_2.jpg" alt="Asia 2026" class="slide-img-pc">
  124.         <img src="/user_data/main_banner/rock/pc_Asia2026_1024_400_2.jpg" alt="Asia 2026" class="slide-img-sp">
  125.       </a>
  126.     </div>
  127.     </div>
  128.   </div>
  129. {% endblock %}