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.             width: 100%;
  19.             max-width: 2500px;
  20.             margin-bottom: 0;
  21.         }
  23.         .slick-list {
  24.             height: 100%;
  25.         }
  26.         .slick-dots {
  27.             position: absolute;
  28.             width: 100%;
  29.             padding: 0;
  30.             list-style: none;
  31.             text-align: center;
  32.         }
  34.         .slick-dots li {
  35.             position: relative;
  36.             display: inline-block;
  37.             width: 20px;
  38.             height: 20px;
  39.             margin: 0 5px;
  40.             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: 1;
  78.             background-color: #ffffff;
  79.             border-radius: 50%;
  80.             border: 1px solid #CCCCCC;
  81.         }
  83.         .slick-dots li.slick-active button:before {
  84.             opacity: 1;
  85.             background-color: #707070;
  86.             border: 1px solid #707070;
  87.         }
  89.         .slick-dots li button.thumbnail img {
  90.             width: 0;
  91.             height: 0;
  92.         }
  93.     </style>
  94. {% endblock %}
  96. {% block javascript %}
  97.      <script>
  98.                     $(function() {
  99.                         $('.main_visual').slick({
  100.                             dots: false,
  101.                             arrows: true,
  102.                             autoplay: true,
  103.                             infinite: true,
  104.                             speed: 500,
  105.                             centerMode:true,
  106.                 centerPadding:"25%",
  107.                 // slidesToShow: 3,
  108.                 adaptiveHeight: true,
  109.                 prevArrow: '<img src="{{ asset('assets/img/icon-arrow-prev.png') }}" class="slide-arrow prev-arrow">',
  110.                 nextArrow: '<img src="{{ asset('assets/img/icon-arrow-next.png') }}" class="slide-arrow next-arrow">',
  111.                 responsive: [
  112.                     {
  113.                     breakpoint: 1440,
  114.                            settings: {
  115.                              centerPadding:"14%",
  116.                            },
  117.                     },
  118.                     {
  119.                     breakpoint: 768,
  120.                         settings: {
  121.                             // arrows: false,
  122.                             slidesToShow: 1,
  123.                             centerPadding: false,
  124.                             dots: true,
  125.                         },
  126.                     },
  127.                 ],
  128.                         });
  129.                     });
  130.                 </script>
  131. {% endblock javascript %}
  133. {% block main %}
  134.     <div class="ec-sliderRole pc">
  135.         <div class="main_visual">
  136.             <div class="item slick-slide">
  137.                 {#<a href="{{ url('product_list') }}?category_id=26">#}
  138.                 <img src="/html/user_data/01.jpg" alt="特集">
  139.             </div>
  140.             <div class="item slick-slide">
  141.                 {#<a href="{{ url('product_list') }}?category_id=27">#}
  142.                 <img src="/html/user_data/02.jpg" alt="特集">
  143.                 {#</a>#}
  144.             </div>
  145.             <div class="item slick-slide">
  146.                 {#<a href="{{ url('product_list') }}?category_id=28">#}
  147.                     <img src="/html/user_data/03.jpg" alt="特集">
  148.                 {#</a>#}
  149.             </div>
  150.         </div>
  151.     </div>
  152.     <div class="ec-sliderRole sp">
  153.         <div class="main_visual">
  154.             <div class="item slick-slide">
  155.                 {#<a href="{{ url('product_list') }}?category_id=27"></a>#}
  156.                 <img src="/html/user_data/SP01.jpg" alt="特集">
  157.             </div>
  158.             <div class="item slick-slide">
  159.                 {#<a href="{{ url('product_list') }}?category_id=27"></a>                #}
  160.                 <img src="/html/user_data/sp02.jpg" alt="特集">
  161.             </div>
  162.             <div class="item slick-slide">
  163.                 {#<a href="{{ url('product_list') }}?category_id=28"></a>#}
  164.                 <img src="/html/user_data/SP03.jpg" alt="特集">
  165.             </div>
  166.         </div>
  167.     </div>
  168. {% endblock %}