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. #}
  12. {% extends 'default_frame.twig' %}
  14. {% set body_class = 'front_page' %}
  16. {% block stylesheet %}
  17. {#
  18.     <style>
  19.         .slick-slider {
  20.             margin-bottom: 30px;
  21.         }
  23.         .slick-dots {
  24.             position: absolute;
  25.             bottom: -45px;
  26.             display: block;
  27.             width: 100%;
  28.             padding: 0;
  29.             list-style: none;
  30.             text-align: center;
  31.         }
  33.         .slick-dots li {
  34.             position: relative;
  35.             display: inline-block;
  36.             width: 20px;
  37.             height: 20px;
  38.             margin: 0 5px;
  39.             padding: 0;
  41.             cursor: pointer;
  42.         }
  44.         .slick-dots li button {
  45.             font-size: 0;
  46.             line-height: 0;
  47.             display: block;
  48.             width: 20px;
  49.             height: 20px;
  50.             padding: 5px;
  51.             cursor: pointer;
  52.             color: transparent;
  53.             border: 0;
  54.             outline: none;
  55.             background: transparent;
  56.         }
  58.         .slick-dots li button:hover,
  59.         .slick-dots li button:focus {
  60.             outline: none;
  61.         }
  63.         .slick-dots li button:hover:before,
  64.         .slick-dots li button:focus:before {
  65.             opacity: 1;
  66.         }
  68.         .slick-dots li button:before {
  69.             content: " ";
  70.             line-height: 20px;
  71.             position: absolute;
  72.             top: 0;
  73.             left: 0;
  74.             width: 12px;
  75.             height: 12px;
  76.             text-align: center;
  77.             opacity: .25;
  78.             background-color: black;
  79.             border-radius: 50%;
  81.         }
  83.         .slick-dots li.slick-active button:before {
  84.             opacity: .75;
  85.             background-color: black;
  86.         }
  88.         .slick-dots li button.thumbnail img {
  89.             width: 0;
  90.             height: 0;
  91.         }
  92.     </style>
  93. #}
  94. {% endblock %}
  96. {% block javascript %}
  97. {#
  98.     <script>
  99.         $(function() {
  100.             $('.main_visual').slick({
  101.                 dots: true,
  102.                 arrows: false,
  103.                 autoplay: true,
  104.                 speed: 300
  105.             });
  106.         });
  107.     </script>
  108. #}
  109. {% endblock javascript %}
  112. {% block main %}
  113. {#    
  114.     <div class="ec-sliderRole">
  115.         <div class="main_visual">
  116.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
  117.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
  118.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>
  119.         </div>
  120.     </div>
  121. #}
  122. {% endblock %}