app/template/mizunasu/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'front_page' %}
  10. {% block stylesheet %}
  11.     <style>
  12.         .slick-slider {
  13.             margin-bottom: 10px;
  14.         }
  15.         .slick-dots {
  16.             position: absolute;
  17.             bottom: -45px;
  18.             display: block;
  19.             width: 100%;
  20.             padding: 0;
  21.             list-style: none;
  22.             text-align: center;
  23.         }
  24.         .slick-dots li {
  25.             position: relative;
  26.             display: inline-block;
  27.             width: 20px;
  28.             height: 20px;
  29.             margin: 0 5px;
  30.             padding: 0;
  31.             cursor: pointer;
  32.         }
  33.         .slick-dots li button {
  34.             font-size: 0;
  35.             line-height: 0;
  36.             display: block;
  37.             width: 20px;
  38.             height: 20px;
  39.             padding: 5px;
  40.             cursor: pointer;
  41.             color: transparent;
  42.             border: 0;
  43.             outline: none;
  44.             background: transparent;
  45.         }
  46.         .slick-dots li button:hover,
  47.         .slick-dots li button:focus {
  48.             outline: none;
  49.         }
  50.         .slick-dots li button:hover:before,
  51.         .slick-dots li button:focus:before {
  52.             opacity: 1;
  53.         }
  54.         .slick-dots li button:before {
  55.             content: " ";
  56.             line-height: 20px;
  57.             position: absolute;
  58.             top: 0;
  59.             left: 0;
  60.             width: 12px;
  61.             height: 12px;
  62.             text-align: center;
  63.             opacity: .25;
  64.             background-color: white;
  65.             border-radius: 50%;
  66.         }
  67.         .slick-dots li.slick-active button:before {
  68.             opacity: .75;
  69.             background-color: white;
  70.         }
  71.         .slick-dots li button.thumbnail img {
  72.             width: 0;
  73.             height: 0;
  74.         }
  75.     </style>
  76. {% endblock %}
  77. {% block javascript %}
  78.     <script>
  79.         $(function() {
  80.             $('.main_visual').slick({
  81.                 arrows: false,
  82.                 autoplay: true,
  83.                 speed: 300,
  84.                 asNavFor: ".thumbnail",
  85.             });
  86.             
  87.               $(".thumbnail").slick({
  88.             slidesToShow: 3,
  89.             asNavFor: ".main_visual",
  90.             focusOnSelect: true,
  91.           });
  92.         });
  93.     </script>
  94. {% endblock javascript %}
  95. {% block main %}
  96.     <div class="ec-sliderRole">
  97.         <div class="main_visual">
  98.             <div class="item slick-slide"><img src="{{ asset('/html/user_data/img/slide/iseya-top-slide-01.jpg') }}"></div>
  99.             <div class="item slick-slide"><img src="{{ asset('/html/user_data/img/slide/iseya-top-slide-02.jpg') }}"></div>
  100.             <div class="item slick-slide"><img src="{{ asset('/html/user_data/img/slide/iseya-top-slide-03.jpg') }}"></div>
  101.             <div class="item slick-slide"><img src="{{ asset('/html/user_data/img/slide/iseya-top-slide-04.jpg') }}"></div>
  102.             <div class="item slick-slide"><img src="{{ asset('/html/user_data/img/slide/iseya-top-slide-05.jpg') }}"></div>
  103.         </div>
  104.         <div class="thumbnail">
  105.             <div class="thumbnail-img"><img src="{{ asset('/html/user_data/img/slide/iseya-top-slide-01.jpg') }}"></div>
  106.             <div class="thumbnail-img"><img src="{{ asset('/html/user_data/img/slide/iseya-top-slide-02.jpg') }}"></div>
  107.             <div class="thumbnail-img"><img src="{{ asset('/html/user_data/img/slide/iseya-top-slide-03.jpg') }}"></div>
  108.             <div class="thumbnail-img"><img src="{{ asset('/html/user_data/img/slide/iseya-top-slide-04.jpg') }}"></div>
  109.             <div class="thumbnail-img"><img src="{{ asset('/html/user_data/img/slide/iseya-top-slide-05.jpg') }}"></div>
  110.         </div>
  111.     </div>
  112. {% endblock %}