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

Open in your IDE?
  1. <style>
  2. /*全てに適用*/    
  3.         .slick-slider {
  4.             margin-bottom: 30px;
  5.         }
  7.         .slick-dots {
  8.             position: absolute;
  9.             bottom: -45px;
  10.             display: block;
  11.             width: 100%;
  12.             padding: 0;
  13.             list-style: none;
  14.             text-align: center;
  15.         }
  17.         .slick-dots li {
  18.             position: relative;
  19.             display: inline-block;
  20.             width: 20px;
  21.             height: 20px;
  22.             margin: 0 5px;
  23.             padding: 0;
  25.             cursor: pointer;
  26.         }
  28.         .slick-dots li button {
  29.             font-size: 0;
  30.             line-height: 0;
  31.             display: block;
  32.             width: 20px;
  33.             height: 20px;
  34.             padding: 5px;
  35.             cursor: pointer;
  36.             color: transparent;
  37.             border: 0;
  38.             outline: none;
  39.             background: transparent;
  40.         }
  42.         .slick-dots li button:hover,
  43.         .slick-dots li button:focus {
  44.             outline: none;
  45.         }
  47.         .slick-dots li button:hover:before,
  48.         .slick-dots li button:focus:before {
  49.             opacity: 1;
  50.         }
  52.         .slick-dots li button:before {
  53.             content: " ";
  54.             line-height: 20px;
  55.             position: absolute;
  56.             top: 0;
  57.             left: 0;
  58.             width: 12px;
  59.             height: 12px;
  60.             text-align: center;
  61.             opacity: .25;
  62.             background-color: black;
  63.             border-radius: 50%;
  65.         }
  67.         .slick-dots li.slick-active button:before {
  68.             opacity: .75;
  69.             background-color: black;
  70.         }
  72.         .slick-dots li button.thumbnail img {
  73.             width: 0;
  74.             height: 0;
  75.         }
  77.     
  78.     
  79.     
  80. /*ウィンドウ幅が767px以上の場合に適用*/
  81. @media screen and (min-width: 767px) { 
  82.     .ec-sliderRole{
  83.         padding: 0 0 0 0;
  84.         max-width: 100%;
  85.         margin-bottom: 80px;
  86.     }
  87. }
  89. /*ウィンドウ幅が最大767pxまでの場合に適用*/
  90. @media screen and (max-width: 767px) { 
  91.     .ec-sliderRole{
  92.         padding: 0 0 0 0;
  93.         max-width: 100%;
  94.         margin-bottom: 30px;
  95.     }
  96.     
  97. }
  98. </style>
  99. <script>
  100.     $(function() {
  101.         $('.main_visual').slick({
  102.             dots: true,
  103.             arrows: false,
  104.             autoplay: true,
  105.             speed: 300
  106.         });
  107.     });
  108. </script>
  109. <div class="ec-sliderRole">
  110.     <div class="main_visual">
  111.         <div class="item slick-slide"><a href="/products/list?category_id=40"><img src="/html/user_data/img/top/no1.png"></a></div>
  112.         {#<div class="item slick-slide"><img src="/html/user_data/img/top/no1.png"></div>#}
  113.         <div class="item slick-slide"><a href = "{{ eccube_config.multipure_lp_rental }}"><img src="/html/user_data/img/top/no2.png"></a></div>
  114.         <div class="item slick-slide"><a href="{{ url('items_aquaextra') }}"><img src="/html/user_data/img/top/no3.png"></a></div>
  115.     </div>
  116. </div>