src/Eccube/Resource/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.         .main_visual {
  18.             margin-left: calc(-50vw + 50%);
  19.             width: 100vw;
  20.         }
  21.         .slick-slider {
  22.             margin-bottom: 30px;
  23.         }
  25.         .slick-dots {
  26.             position: absolute;
  27.             bottom: -45px;
  28.             display: block;
  29.             width: 100%;
  30.             padding: 0;
  31.             list-style: none;
  32.             text-align: center;
  33.         }
  35.         .slick-dots li {
  36.             position: relative;
  37.             display: inline-block;
  38.             width: 20px;
  39.             height: 20px;
  40.             margin: 0 5px;
  41.             padding: 0;
  43.             cursor: pointer;
  44.         }
  46.         .slick-dots li button {
  47.             font-size: 0;
  48.             line-height: 0;
  49.             display: block;
  50.             width: 20px;
  51.             height: 20px;
  52.             padding: 5px;
  53.             cursor: pointer;
  54.             color: transparent;
  55.             border: 0;
  56.             outline: none;
  57.             background: transparent;
  58.         }
  60.         .slick-dots li button:hover,
  61.         .slick-dots li button:focus {
  62.             outline: none;
  63.         }
  65.         .slick-dots li button:hover:before,
  66.         .slick-dots li button:focus:before {
  67.             opacity: 1;
  68.         }
  70.         .slick-dots li button:before {
  71.             content: " ";
  72.             line-height: 20px;
  73.             position: absolute;
  74.             top: 0;
  75.             left: 0;
  76.             width: 12px;
  77.             height: 12px;
  78.             text-align: center;
  79.             opacity: .25;
  80.             background-color: black;
  81.             border-radius: 50%;
  83.         }
  85.         .slick-dots li.slick-active button:before {
  86.             opacity: .75;
  87.             background-color: black;
  88.         }
  90.         .slick-dots li button.thumbnail img {
  91.             width: 0;
  92.             height: 0;
  93.         }
  95.         @media screen and (max-width:480px) {
  96.             .slick-list {
  97.                 margin: 0 1rem;
  98.             }
  99.         }
  100.     </style>
  101. {% endblock %}
  103. {% block javascript %}
  104.     <script>
  105.         $(function() {
  106.             $('.main_visual').slick({
  107.                 dots: true,
  108.                 arrows: false,
  109.                 centerMode: true,
  110.                 centerPadding: "10%",
  111.                 autoplay: true,
  112.                 speed: 600,
  113.                 responsive: [{
  114.                     breakpoint: 480,
  115.                     settings: {
  116.                         slidesToShow: 1,
  117.                         centerPadding: "0"
  118.                     }
  119.                 }]
  120.             });
  121.         });
  122.     </script>
  123. {% endblock javascript %}
  125. {% block main %}
  126.     <div class="ec-sliderRole">
  127.         <div class="main_visual">
  128.             <div class="item slick-slide">
  129.                 <a href="{{ url('product_list') }}?category_id=5">
  130.                     <picture>
  131.                         <source media="(max-width: 480px)" srcset="/html/template/default/assets/img/top/univatown_slider1_SP.png">
  132.                         <img src="/html/template/default/assets/img/top/univatown_slider1.png" alt="スライド画像1">
  133.                     </picture>
  134.                 </a>
  135.             </div>
  136.             <div class="item slick-slide">
  137.                 <a href="{{ url('product_list') }}?category_id=1">
  138.                     <picture>
  139.                         <source media="(max-width: 480px)" srcset="/html/template/default/assets/img/top/univatown_slider2_SP.png">
  140.                         <img src="/html/template/default/assets/img/top/univatown_slider2.png" alt="スライド画像2">
  141.                     </picture>
  142.                 </a>
  143.             </div>
  144.             <div class="item slick-slide">
  145.                 <a href="{{ url('product_list') }}?category_id=2">
  146.                     <picture>
  147.                         <source media="(max-width: 480px)" srcset="/html/template/default/assets/img/top/univatown_slider3_SP.png">
  148.                         <img src="/html/template/default/assets/img/top/univatown_slider3.png" alt="スライド画像3">
  149.                     </picture>
  150.                 </a>
  151.             </div>
  152.         </div>
  153.     </div>
  155. {% endblock %}