app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2.     This file is part of EC-CUBE
  3.     
  4.     Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  5.     
  6.     http://www.ec-cube.co.jp/
  7.     
  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' %}
  12.     
  13.     {% set body_class = 'front_page' %}
  14.     
  15.     {% block stylesheet %}
  16.         <style>
  17.             .slick-slider {
  18.                 margin-bottom: 30px;
  19.             }
  20.     
  21.             .slick-dots {
  22.                 position: absolute;
  23.                 bottom: -25px;
  24.                 display: block;
  25.                 width: 100%;
  26.                 padding: 0;
  27.                 list-style: none;
  28.                 text-align: center;
  29.             }
  30.     
  31.             .slick-dots li {
  32.                 position: relative;
  33.                 display: inline-block;
  34.                 width: 20px;
  35.                 height: 20px;
  36.                 margin: 0 5px;
  37.                 padding: 0;
  38.                 cursor: pointer;
  39.             }
  40.     
  41.             .slick-dots li button {
  42.                 font-size: 0;
  43.                 line-height: 0;
  44.                 display: block;
  45.                 width: 20px;
  46.                 height: 20px;
  47.                 padding: 5px;
  48.                 cursor: pointer;
  49.                 color: transparent;
  50.                 border: 0;
  51.                 outline: none;
  52.                 background: transparent;
  53.             }
  54.     
  55.             .slick-dots li button:hover,
  56.             .slick-dots li button:focus {
  57.                 outline: none;
  58.             }
  59.     
  60.             .slick-dots li button:hover:before,
  61.             .slick-dots li button:focus:before {
  62.                 opacity: 1;
  63.             }
  64.     
  65.             .slick-dots li button:before {
  66.                 content: " ";
  67.                 line-height: 20px;
  68.                 position: absolute;
  69.                 top: 0;
  70.                 left: 0;
  71.                 width: 12px;
  72.                 height: 12px;
  73.                 text-align: center;
  74.                 opacity: .25;
  75.                 background-color: black;
  76.                 border-radius: 50%;
  77.             }
  78.     
  79.             .slick-dots li.slick-active button:before {
  80.                 opacity: .75;
  81.                 background-color: black;
  82.             }
  83.     
  84.             .slick-dots li button.thumbnail img {
  85.                 width: 0;
  86.                 height: 0;
  87.             }
  88.             
  89.             .slick-prev, .slick-next {
  90.                 font-size: 0;
  91.                 line-height: 0;
  92.                 position: absolute;
  93.                 top: 50%;
  94.                 display: block;
  95.                 width: 60px;
  96.                 height: 60px;
  97.                 padding: 0;
  98.                 -webkit-transform: translate(0, -50%);
  99.                 -ms-transform: translate(0, -50%);
  100.                 transform: translate(0, -50%);
  101.                 cursor: pointer;
  102.                 color: transparent;
  103.                 border: none;
  104.                 outline: none;
  105.                 background: transparent;
  106.             }
  107.              
  108.             .slick-prev {
  109.                 left: 0;
  110.                 z-index: 1;
  111.             }
  112.              
  113.             .slick-next {
  114.                 right: 0;
  115.                 z-index: 1;
  116.             }
  117.              
  118.             .slick-prev:before, .slick-next:before {
  119.                 font-family: 'slick';
  120.                 font-size: 40px;
  121.                 line-height: 1;
  122.                 opacity: 1;
  123.                 color: white;
  124.                 -webkit-font-smoothing: antialiased;
  125.                 -moz-osx-font-smoothing: grayscale;
  126.             }
  127.      
  128.             .slick-prev:before {
  129.                 content: url(/html/user_data/assets/img/common/btn_carousel_l.webp);
  130.             }
  131.              
  132.             .slick-next:before {
  133.                 content: url(/html/user_data/assets/img/common/btn_carousel_r.webp);
  134.             }
  135.      
  136.             .slick-prev:hover,
  137.             .slick-prev:focus,
  138.             .slick-next:hover,
  139.             .slick-next:focus {
  140.                 color: transparent;
  141.                 outline: none;
  142.                 background: transparent;
  143.             }
  144.              
  145.             .slick-prev:hover:before,
  146.             .slick-prev:focus:before,
  147.             .slick-next:hover:before,
  148.             .slick-next:focus:before {
  149.                 opacity: 1;
  150.             }
  151.              
  152.             .slick-prev.slick-disabled:before,
  153.             .slick-next.slick-disabled:before {
  154.                 opacity: .25;
  155.             }
  156.     
  157.             .slick-track{
  158.                 position: relative;
  159.                 top: 0;
  160.                 left: 0;
  161.                 display: flex;
  162.                 margin-left: auto;
  163.                 margin-right: auto;
  164.             }
  165.                 
  166.         </style>
  167.     {% endblock %}
  168.     
  169.     {% block javascript %}
  170.         <script>
  171.             
  172.             $(function() {
  174.                 let width = $(window).width();
  175.                 var photo_count = 1;
  176.                 if (width <= 768) {
  177.                 } else if (width <= 1024) {
  178.                     // タブレット
  179.                     photo_count = 3;
  180.                 } else {
  181.                     // PC
  182.                     photo_count = 3;
  183.                 }
  185.                 $('.main_visual').slick({
  186.                     dots: false,
  187.                     autoplay: true,
  188.                     speed: 300,
  189.                     centerMode: true,
  190.                     centerPadding: '20%',
  191.                     arrows: true,
  192.                     infinite: true,
  193.                     slidesToShow: photo_count
  194.                 });
  195.             });
  196.         </script>
  197.     {% endblock javascript %}
  198.     
  199.     {% block main %}
  200.         
  201.     {% endblock %}