app/template/default/Block/voice.twig line 1

Open in your IDE?
  1. {% block stylesheet %}
  2. <style type="text/css">
  3.     {# arrow #}
  4.     #CustomersVoices .slick-arrow {
  5.         position: absolute;
  6.         top: 50%;
  7.         width: 50px;
  8.         height: 50px;
  9.         background: rgba(0, 0, 0, .7);
  10.         z-index: 1;
  11.         opacity: 0.7;
  12.         cursor: pointer;
  13.     }
  14.     #CustomersVoices .slick-arrow::before {
  15.         position: absolute;
  16.         content: "";
  17.         top: 50%;
  18.         width: 26px;
  19.         height: 26px;
  20.         border: solid 1px #FFF;
  21.         top: 11px;
  22.         border-width: 1px 0px 0px 1px;
  23.     }
  24.     #CustomersVoices .slick-prev {
  25.         left: 25px;
  26.     }
  27.     #CustomersVoices .slick-next {
  28.         right: 25px;
  29.     }
  30.     #CustomersVoices .slick-prev::before {
  31.         transform: rotate(-45deg);
  32.         left: 21px;
  33.     }
  34.     #CustomersVoices .slick-next::before {
  35.         transform: rotate(130deg);
  36.         right: 21px;
  37.     }
  38.     @media only screen and (max-width: 767px) {
  39.         #CustomersVoices .slick-track {
  40.             left: 10%;
  41.         }
  42.         #CustomersVoices .slick-arrow {
  43.             width: 30px;
  44.             height: 30px;
  45.         }
  46.         #CustomersVoices .slick-arrow::before {
  47.             top: 7px;
  48.             width: 16px;
  49.             height: 16px;
  50.         }
  51.         #CustomersVoices .slick-prev {
  52.             left: 0;
  53.         }
  54.         #CustomersVoices .slick-next {
  55.             right: 0;
  56.         }
  57.         #CustomersVoices .slick-prev::before {
  58.             left: 12px;
  59.         }
  60.         #CustomersVoices .slick-next::before {
  61.             right: 12px;
  62.         }
  63.     }
  64. </style>
  65. {% endblock %}
  66. {% block javascript %}
  67.     <script type="text/javascript">
  68.         $(function(){
  69.             $('#CustomersVoices').slick({
  70.                 infinite: true,
  71.                 slidesToShow: 2.55,
  72.                 slidesToScroll: 1,
  73.                 initialSlide: 2,
  74.                 centerMode: true,
  75.                 adaptiveHeight:true,
  76.                 autoplay: false,
  77.                 prevArrow: '<div class="slick-prev"></div>',
  78.                 nextArrow: '<div class="slick-next"></div>',
  79.                 responsive: [{
  80.                     breakpoint: 768,
  81.                     settings: {
  82.                         initialSlide: 1,
  83.                         slidesToShow: 1.08,
  84.                         centerMode: false,
  85.                     }
  86.                 }],
  87.             });
  88.             $('#CustomersVoices').slick("slickSetOption", "slidesToScroll", 1);
  89.         });
  90.     </script>
  91. {% endblock javascript %}
  92. {% block main %}
  93.     <section id="voice" class="fadeinu block_box">
  94.         <div class="ec-role">
  95.             <div class="ec-secHeading">
  96.                 <span class="ec-secHeading__en">{{ 'CUSTOMER’S VOICE'|trans }}</span><br>
  97.                 <span class="ec-secHeading__ja"><h2>{{ 'お客様からの声'|trans }}<img src="{{ asset('assets/img/top/icon_speechbubble.svg','user_data') }}" class="icon"></h2></span>
  98.             </div>
  99.             <section id="CustomersVoices">
  100.                 <div class="voice_contents">
  101.                     <div>
  102.                         おいしいゆばのセットをありがとうございました。<br>
  103.                         「とても大豆の味が濃くて、美味しいねぇ~!」と母も大満足。<br>
  104.                         食す度に体が喜び元気になっていくのがわかりますし、おさしみゆばは丁寧なお仕事ぶりが目に浮かびます。<br>
  105.                         生麩もお餅とは違うもちもち感に感動したようで、私も大変おいしくいただいています。<br>
  106.                         またぜひ注文させていただきます。本当にありがとうございました。
  107.                     </div>
  108.                     <div>
  109.                         京都府 お客様<br>
  110.                         (人気の生ゆば・生麩セット)
  111.                     </div>
  112.                 </div>
  113.                 <div class="voice_contents">
  114.                     <div>
  115.                         こちらの湯葉が本当に大好きで、県外に住む友達や知り合いにお土産でよく渡します。<br>
  116.                         湯葉をあまり食べたことがない人から「湯葉ってこんなに美味しいんだね!」と言われると、なんだか誇らしい気持ちになります。<br>
  117.                         これからもどんどん広めていくつもりです!
  118.                     </div>
  119.                     <div>
  120.                         滋賀県 お客様<br>
  121.                     </div>
  122.                 </div>
  123.                 <div class="voice_contents">
  124.                     <div>
  125.                         娘が好きなので、以前百貨店の「全国うまいもの展」で湯葉を買いました。<br>
  126.                         「すっごくおいしい!」と湯葉にハマり、あちこちのスーパーで湯葉を買いましたが「全然違う…」と言われてしまいました。<br>
  127.                         パッケージを覚えていたので取り寄せたところ、「やっぱりおいしい!」と大満足の娘です。<br>
  128.                         お取り寄せしてよかったです!
  129.                     </div>
  130.                     <div>
  131.                         埼玉県 お客様<br>
  132.                         (本さしみゆば)
  133.                     </div>
  134.                 </div>
  135.                 <div class="voice_contents">
  136.                     <div>
  137.                         母がこちらの湯葉を大変気に入っているので、セレクトしました。<br>
  138.                         京都の湯葉もいくつか食べてみたのですが、やっぱりこちらの湯葉が1番美味しいと感じております。
  139.                     </div>
  140.                     <div>
  141.                         東京都 お客様<br>
  142.                     </div>
  143.                 </div>
  144.                 <div class="voice_contents">
  145.                     <div>
  146.                         生ゆばを購入して高齢の母に渡したところ、食が細くなり思うように食べられないとこぼしていた母が「これなら食べられる!」と大喜びしましたので、また注文させていただきました。<br>
  147.                         私もうれしく思います。今後ともよろしくお願いいたします。
  148.                     </div>
  149.                     <div>
  150.                         京都府 お客様<br>
  151.                     </div>
  152.                 </div>
  153.                 <div class="voice_contents">
  154.                     <div>
  155.                         家族が胃が悪くなり、湯葉だけは食べれてあっという間になくなったので、またすぐ注文させていただきました。<br>
  156.                         本当においしくて胃にも優しくて助かった、素晴らしい湯葉だねとよろしくお伝えくださいとのことです。<br>
  157.                         もちろん私は365日ずっと湯葉ですがぜんぜん飽きません。本当においしくいただいています。<br>
  158.                         作ってくださる皆さんに感謝の気持ちでいっぱいです。いつも本当にありがとうございます。
  159.                     </div>
  160.                     <div>
  161.                         神奈川県 お客様<br>
  162.                         (本さしみゆば)
  163.                     </div>
  164.                 </div>
  165.             </section>
  166.         </div>
  167.     </section>
  168. {% endblock %}