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-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. </style>
  92. {% endblock %}
  94. {% block javascript %}
  95. <script>
  96.     $(function () {
  97.         $('.main_visual').slick({
  98.             dots: true,
  99.             arrows: false,
  100.             autoplay: true,
  101.             centerMode: true,
  102.             mobileFirst: true,
  103.             centerPadding: '10%',
  104.             speed: 300
  105.         });
  106.     });
  107. </script>
  108. {% endblock javascript %}
  111. {% block main %}
  112.     <div class="ec-sliderRole pc">
  113.         <div class="main_visual">
  114.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
  115.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
  116.             {# <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div> #}
  117.             {#<div class="item slick-slide"><img src="/html/user_data/assets/img/slick-slid/img_hero_pc01.jpg"></div>#}
  118.         </div>
  119.     </div>
  120.     <div class="ec-sliderRole sp">
  121.         <div class="main_visual">
  122.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_sp01.jpg') }}"></div>
  123.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_sp02.jpg') }}"></div>
  124.             {# <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_sp03.jpg') }}"></div> #}
  125.         </div>
  126.     </div>
  127. {% endblock %}