app/template/default/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set body_class = 'front_page' %}
  5. {% block stylesheet %}
  6.     <style>
  7.         .slick-slider {
  8.             margin-bottom: 30px;
  9.         }
  11.         .slick-dots {
  12.             position: absolute;
  13.             bottom: -45px;
  14.             display: block;
  15.             width: 100%;
  16.             padding: 0;
  17.             list-style: none;
  18.             text-align: center;
  19.         }
  21.         .slick-dots li {
  22.             position: relative;
  23.             display: inline-block;
  24.             width: 20px;
  25.             height: 20px;
  26.             margin: 0 5px;
  27.             padding: 0;
  29.             cursor: pointer;
  30.         }
  32.         .slick-dots li button {
  33.             font-size: 0;
  34.             line-height: 0;
  35.             display: block;
  36.             width: 20px;
  37.             height: 20px;
  38.             padding: 5px;
  39.             cursor: pointer;
  40.             color: transparent;
  41.             border: 0;
  42.             outline: none;
  43.             background: transparent;
  44.         }
  46.         .slick-dots li button:hover,
  47.         .slick-dots li button:focus {
  48.             outline: none;
  49.         }
  51.         .slick-dots li button:hover:before,
  52.         .slick-dots li button:focus:before {
  53.             opacity: 1;
  54.         }
  56.         .slick-dots li button:before {
  57.             content: " ";
  58.             line-height: 20px;
  59.             position: absolute;
  60.             top: 0;
  61.             left: 0;
  62.             width: 12px;
  63.             height: 12px;
  64.             text-align: center;
  65.             opacity: .25;
  66.             background-color: black;
  67.             border-radius: 50%;
  69.         }
  71.         .slick-dots li.slick-active button:before {
  72.             opacity: .75;
  73.             background-color: black;
  74.         }
  76.         .slick-dots li button.thumbnail img {
  77.             width: 0;
  78.             height: 0;
  79.         }
  80.     </style>
  81. {% endblock %}
  83. {% block javascript %}
  84.     <script>
  85.         $(function() {
  86.             $('.main_visual').slick({
  87.                 dots: true,
  88.                 arrows: false,
  89.                 autoplay: true,
  90.                 speed: 300
  91.             });
  92.         });
  93.     </script>
  94. {% endblock javascript %}
  96. {% block main %}
  97. {% endblock %}