app/template/kaiino/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.         }
  65.         .front_page .slick-dots li button::before{
  66.           border: 0;
  67.         }
  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: #CCC;
  79.             border-radius: 50%;
  81.         }
  83.         .slick-dots li.slick-active button:before {
  84.             opacity: 1;
  85.             background-color: #cee1d0;
  86.         }
  88.         .slick-dots li button.thumbnail img {
  89.             width: 0;
  90.             height: 0;
  91.         }
  92.     </style>
  93. {% endblock %}
  95. {% block javascript %}
  96.     <script>
  97.         $(function() {
  98.           
  99.           $(window).scroll(function () {
  100.             var now = $(window).scrollTop();
  101.             var pos = 50 - now;
  102.             if(pos < 8){
  103.               pos = 8;
  104.             }
  105.             $('.ec-headerNavSP').css('top', pos);
  106.           });
  107.           
  108.             $('.main_visual').slick({
  109.               centerMode: true,
  110.               centerPadding: '25vw',
  111.               infinite: true,
  112.               dots: true,
  113.               arrows: false,
  114.               autoplay: true,
  115.               speed: 300,
  116.               responsive: [
  117.                 {
  118.                   breakpoint: 600,
  119.                   settings: {
  120.                     centerMode: true,
  121.                     centerPadding: '5vw'
  122.                   }
  123.                 },
  124.                 {
  125.                   breakpoint: 1281,
  126.                   settings: {
  127.                     centerMode: true,
  128.                     centerPadding: '18vw'
  129.                   }
  130.                 }
  131.               ]
  132.             });
  133.         });
  134.     </script>
  135. {% endblock javascript %}
  137. {% block main %}
  138.   
  139.     <div class="ec-sliderRole">
  140.         <div class="main_visual">
  141.           {% for key, blog in Blogs %}
  142.           <div class="item slick-slide">
  143.             <a href="{{ url("blog_view", { id : blog.ID}) }}">
  144.              <img src="{{ blog.img_src.sizes.large }}" alt="{{ blog.post_title }}">
  145.             </a>
  146.           </div>
  147.           {% endfor %}
  148.         </div>
  149.     </div>
  151.             
  152. {% endblock %}