templates/FrontBundle/Page/spectacles-precedents.html.twig line 1

Open in your IDE?
  1. {% extends 'FrontBundle/layout.html.twig' %}
  3. {% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
  4. {% block description %}{{ page.metaDescription }}{% endblock %}
  6. {% block extra_class %}stack{% endblock %}
  7. {% block json_ld %}
  8.     <script type="application/ld+json">
  9.         {
  10.           "@context": "https://schema.org",
  11.           "@type": "WebPage",
  12.           "name": "{{ page.metaTitle | escape('js') }}",
  13.           "description": "{{ page.metaDescription | escape('js') }}",
  14.           "thumbnailUrl": "{{ asset ('/front/img/spectacle-prev-frenesie.jpg') }}"
  15.          }
  16.     </script>
  17. {% endblock %}
  19. {% block stylesheets %}
  20.     <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  21.     <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  22. {% endblock %}
  24. {% block body %}
  29.     <section class="espace-content full" id="concerts" style="margin-top: 90px;">
  30.         <div class="content">
  31.             <h1 class="mb-2 mt-5">{{ 'precedents_title'|tr(tr)|upper|raw }}</h1>
  32.           <p class="p-0">{{ 'precedents_subtitle'|tr(tr)|raw }}</p>
  33.       </div>
  34.     </section>
  36.     <section class="spectacles slider p-0 mt-5 mb-5">
  38.                 <div class="content pt-5 pb-5">
  39.                     <div class="owl-carousel pb-3 pt-3">
  42.                         {% for spectacle in spectacles %}
  43.                             <div class="item row">
  44.                                 <div class="col-12 ">
  45. {#                                     <span class="name"><span>{{spectacle.metaTitle}}</span></span> #}
  46.                                     <a href="/{{app.request.locale }}/{{ 'spectacles-precedents'|getUrl(app.request.locale) }}/{{spectacle.slug}}">
  47.                                         <img alt="{{spectacle.slug}}" class="cover" src="/front/img/spectacle-prev-{{spectacle.slug}}.jpg" />
  48. {#                                         <div class="hover"><img src="/front/img/spectacle-prev-hover.svg" alt="link" /></div> #}
  49.                     <div class="hover"><span class="name">{{spectacle.metaTitle}}</span></div>
  50.                                     </a>
  52.                                     <span class="saison">{{spectacle.tags}}</span>
  53.                                 </div>
  54.                             </div>
  56.                         {% endfor %}
  58.               <div class="item row">
  59.                 <div class="col-12 ">
  61.                 </div>
  62.               </div>
  63.               
  64.                     </div>
  65.                 </div>
  67.     </section>
  70.         <div class="horizontal-bar-container" style="margin-bottom: 180px;">
  71.             <div class="horizontal-bar"></div>
  72.             <div class="horizontal-bar-ctrl"></div>
  73.         </div>
  77.         {% include 'FrontBundle/Partial/footer.html.twig' %}
  79. {% endblock %}
  81. {% block javascripts %}
  83.   <script src="/front/js/owl.carousel.min.js"></script>
  85.   <script type="text/javascript">
  87.     $( document ).ready(function() {
  89.             var owl = $('.spectacles .owl-carousel');
  90.         owl.owlCarousel({
  91.             loop:false,
  92.             margin:0,
  93.             nav:true,
  94.             dots:false,
  95.             responsive:{
  96.                 0:{
  97.                     items:1
  98.                 },
  99.                 600:{
  100.                     items:1
  101.                 },
  102.             768:{
  103.                 items:2
  104.             },
  105.             1024:{
  106.                 items:3
  107.             },
  108.                 1920:{
  109.                     items:5
  110.                 }
  111.             }
  112.             });
  115.         owl.on('changed.owl.carousel', function(event) {
  117.           var itemsNbr = owl.data()['owl.carousel'].settings.items;
  118.           var itemsTotal = event.item.count;
  120.           var itemsIndex = event.item.index;
  122.           var pagesNbr = itemsTotal - itemsNbr;
  124.                 var horizontalBar = $('.horizontal-bar').outerWidth();
  125.                 var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  127.                 var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  129.                 var left = itemsIndex * 100 / pagesNbr; // percent
  131.                 left = left * courseLength / 100;
  133.           $('.horizontal-bar-ctrl').css('left', left+'px');
  134.           
  135.         });
  138.     });
  142.     </script>
  145. {% endblock %}