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>
  19.         .slick-slider {
  20.             margin-bottom: 30px;
  22.         }
  24.         .slick-slide {
  25.             height: auto;
  27.         }
  29.         .slick-slide img {
  30.             width: 100%;
  31.             object-fit: cover;
  32.         }
  34.         .main_visual {
  35.             width: 100%;
  36.             margin: 0 auto;
  38.         }
  40.         .ec-sliderRole {
  41.             margin-top: 20px;
  42.             margin-bottom: 40px;
  43.         }
  45.         .main_visual item {
  46.             width: 100%;
  47.             object-fit: cover;
  48.         }
  50.         .slick-dots {
  51.             position: absolute;
  52.             bottom: -40px;
  53.             display: block;
  54.             width: 100%;
  55.             padding: 0;
  56.             list-style: none;
  57.             text-align: center;
  58.         }
  60.         .slick-dots li {
  61.             position: relative;
  62.             display: inline-block;
  63.             width: 20px;
  64.             height: 20px;
  65.             margin: 0 5px;
  66.             padding: 0;
  68.             cursor: pointer;
  69.         }
  71.         .slick-dots li button {
  72.             font-size: 0;
  73.             line-height: 0;
  74.             display: block;
  75.             width: 20px;
  76.             height: 20px;
  77.             padding: 5px;
  78.             cursor: pointer;
  79.             color: transparent;
  80.             border: 0;
  81.             outline: none;
  82.             background: transparent;
  83.         }
  86.         .slick-dots li button:hover,
  87.         .slick-dots li button:focus {
  88.             outline: none;
  89.         }
  91.         .slick-dots li button:hover:before,
  92.         .slick-dots li button:focus:before {
  93.             opacity: 1;
  94.         }
  96.         .slick-dots li button:before {
  97.             content: " ";
  98.             line-height: 20px;
  99.             position: absolute;
  100.             top: 0;
  101.             left: 0;
  102.             width: 12px;
  103.             height: 12px;
  104.             text-align: center;
  105.             opacity: .25;
  106.             background-color: #ff6600;
  107.             border-radius: 50%;
  109.         }
  111.         .slick-dots li.slick-active button:before {
  112.             opacity: .75;
  113.             background-color: #ff6600;
  114.         }
  116.         .slick-dots li button.thumbnail img {
  117.             width: 0;
  118.             height: 0;
  119.         }
  121.     </style>
  122. {% endblock %}
  124. {% block javascript %}
  125. <script>
  126.     $(function() {
  127.     $('.main_visual').slick({
  128.         dots: true,
  129.         arrows: false,
  130.         autoplay: true,
  131.         speed: 600
  132.     });
  133. });
  134. </script>
  135. {% endblock javascript %}
  137. {% block main %}
  138.     <div class="ec-sliderRole">
  139.         <div class="main_visual">
  140.             <div class="item slick-slide"><img
  141.                         src="{{ asset('/ecshop/html/user_data/assets/img/top/slides_hearts.jpg') }}"></div>
  142.             <div class="item slick-slide"><img
  143.                         src="{{ asset('/ecshop/html/user_data/assets/img/top/slides_balloon.jpg') }}"></div>
  144.             <div class="item slick-slide"><img
  145.                         src="{{ asset('/ecshop/html/user_data/assets/img/top/slides_live.jpg') }}"></div>
  146.         </div>
  147.     </div>
  148. {% endblock %}