templates/index.html.twig line 1

Open in your IDE?
  1. {# empty Twig template #}
  2. {% extends 'frontend.html.twig' %}
  3. {#% set esHome=true %#}
  4. {% block fondo_slider %}
  5. {% endblock %}
  6. {% block textosmov %}
  7.     <div class="wide no-movil avisos-text">
  8.         {% if attribute(general2, 'textestatic'~(app.request.locale|capitalize)) !='' %}
  9.             <div class="text-fix">{{attribute(general2, 'textestatic'~(app.request.locale|capitalize))|raw}}</div>
  10.         {% endif %}
  11.         {% if attribute(general2, 'textmoviment'~(app.request.locale|capitalize)) !='' %}
  12. {#            <marquee behavior="scroll" direction="left" scrolldelay="5" scrollamount="5" class="large-12 cell">#}
  13. {#                {{attribute(general2, 'textmoviment'~(app.request.locale|capitalize))|raw}}#}
  14. {#            </marquee>#}
  15.             <style>
  16.                 .marquee {
  17.                     overflow: hidden;
  18.                     white-space: nowrap;
  19.                     background: rgba(0,0,0,0.5);
  20.                     font-family: 'Poppins', sans-serif;
  21.                     color: #fff;
  22.                     /*font-size:1rem;*/
  23.                     width: 100%;
  24.                     padding:10px 0;
  25.                     margin:0 0 -8px 0!important;
  26.                     font-size: 1.5rem;
  27.                     /*background: #CCB36E; !* For browsers that do not support gradients *!*/
  28.                     /*background: -webkit-linear-gradient(#fff, #CCB36E, #CCB36E); !* For Safari 5.1 to 6.0 *!*/
  29.                     /*background: -o-linear-gradient(#fff, #CCB36E, #CCB36E); !* For Opera 11.1 to 12.0 *!*/
  30.                     /*background: -moz-linear-gradient(#fff, #CCB36E, #CCB36E); !* For Firefox 3.6 to 15 *!*/
  31.                     /*background: linear-gradient(#fff, #CCB36E, #CCB36E); !* Standard syntax *!*/
  32.                     /*font-family: 'Archivo Narrow', sans-serif;*/
  33.                     font-weight: normal;
  34.                 }
  36.                 .marquee p {
  37.                     display: inline-block;
  38.                     padding-left: 100%;
  39.                     animation: scroll-left 40s linear infinite;
  40.                 }
  42.                 @keyframes scroll-left {
  43.                     0% {
  44.                         transform: translateX(0);
  45.                     }
  46.                     100% {
  47.                         transform: translateX(-100%);
  48.                     }
  49.                 }
  50.             </style>
  51.             <div class="marquee" class="large-12 cell">
  52.                 {{attribute(general2, 'textmoviment'~(app.request.locale|capitalize))|raw}}
  53.             </div>
  55.         {% endif %}
  56.     </div>
  57. {% endblock %}
  59. {% block caixa_movil %}
  60.     <div style="position:relative;">
  61.         <style>
  62.             body{background: #fff;}
  63.             .grid-container.general{margin-top:0; padding-top:1rem;}
  64.         </style>
  66.         <!--<script>
  67.             $(document).scroll(function () {
  68.                 var y = $(this).scrollTop();
  69.                 if (y > 200) {
  70.                     $('#logo-top').fadeIn();
  71.                 } else {
  72.                     $('#logo-top').fadeOut();
  73.                 }
  75.             });
  76.         </script>-->
  77.         <!--
  78.         {% if videoYoutubeDestacatCentral.youtubeId is defined and videoYoutubeDestacatCentral.youtubeId !='' %}
  79.             {% set youtube = videoYoutubeDestacatCentral.youtubeIdResponsive|split('/embed/') %}
  80.             
  81.         {% else %}
  82.             <div class="grid-x grid-padding-x wide"  {% if videoYoutubeDestacatCentral.youtubeId is defined and videoYoutubeDestacatCentral.youtubeId !='' %} style="background: #5cb6ff;" {% endif %}>
  83.                 <div class="large-2 medium-2 small-6 cell left-home">
  84.                     <div class="grid-x grid-padding-x">
  85.                         <div class="large-12 medium-12 small-3 cell">
  86.                             <div class="button-home">
  87.                                 <a href="{{path('webcam')}}"><i class="fas fa-video"></i><h6><span>{{ "Webcam" | trans }}</h6></a>
  88.                             </div>
  89.                         </div>
  90.                         <div class="large-12 medium-12 small-3 cell">
  91.                             <div class="button-home">
  92.                                 <a href="{{path('frontoffice_videos_youtube2')}}"><i class="fab fa-tv-masella"></i><h6>{{ "Masella TV" | trans }}</h6></a>
  93.                             </div>
  94.                         </div>
  95.                         <div class="large-12 medium-12 small-3 cell">
  96.                             <div class="button-home">
  97.                                 <a href="{{path('frontoffice_fotos')}}"><i class="far fa-image"></i><h6>{{ "Fotos" | trans }}</h6></a>
  98.                             </div>
  99.                         </div>
  100.                         <div class="large-12 medium-12 small-3 cell">
  101.                             <div class="button-home">
  102.                                 <a href="http://www.masella.com/blog/{{app.request.locale}}"><i class="fab fa-wordpress"></i><h6>{{ "Blog" | trans }}</h6></a>
  103.                             </div>
  104.                         </div>
  105.                     </div>
  106.                 </div>
  107.                 <div class="large-8 medium-8 cell no-movil">
  108.                     &nbsp;
  109.                 </div>
  110.                 <div class="large-2 medium-2 small-6 cell right-home">
  111.                     <div class="grid-x grid-padding-x">
  112.                         <div class="large-12 medium-12 small-3 cell">
  113.                             <div class="button-home">
  114.                                 <a href="{{path("paginas",{'_slug':render(controller("App\\Controller\\DefaultController::getAppSlugAction"))})}}"><i class="fas fa-mobile-alt"></i><h6>{{ "App Masella" | trans }}</h6></a>
  115.                             </div>
  116.                         </div>
  117.                     </div>
  118.                 </div>
  119.             </div>
  121.         {% endif %}
  122.         -->
  123.         <div id="box-slide">
  124.             <div class="wide">
  125.                 <div class="slide-home">
  126.                     <div class="orbit" role="region" data-orbit>
  127.                         <div class="orbit-wrapper">
  128.                             <div class="orbit-controls">
  129.                                 <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
  130.                                 <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
  131.                             </div>
  132.                             <ul class="orbit-container">
  133.                                 {% for foto in fotos %}
  134.                                     <li class="is-active orbit-slide">
  135.                                         <figure class="orbit-figure">
  136.                                             <img class="orbit-image" src="{{ asset('uploads/fotos/'~foto.rutaImagen)}}" title="{{ attribute(foto, 'titol'~app.request.locale) }}" />
  137.                                             <figcaption class="orbit-caption">{{ attribute(foto, 'titol'~app.request.locale) }}</figcaption>
  138.                                         </figure>
  139.                                     </li>
  140.                                 {% endfor %}
  141.                             </ul>
  142.                         </div>
  143.                     </div>
  144.                 </div>
  145.             </div>
  146.         </div>
  148.     </div>        
  149. {% endblock %}
  151. {% block caixa %}
  152.     <div style="position:relative;">
  153.         <style>
  154.             body{background: #fff;}
  155.             .grid-container.general{margin-top:0; padding-top:1rem;}
  156.         </style>
  158.         <!--<script>
  159.             $(document).scroll(function () {
  160.                 var y = $(this).scrollTop();
  161.                 if (y > 200) {
  162.                     $('#logo-top').fadeIn();
  163.                 } else {
  164.                     $('#logo-top').fadeOut();
  165.                 }
  167.             });
  168.         </script>-->
  170.             <div class="large-12 cell video-pc no-movil">
  171.                 {%  if general.getVideoSliderHome() == 'video' %}
  172.                     {% if videoYoutubeDestacatCentral.youtubeId is defined and videoYoutubeDestacatCentral.youtubeId !='' %}
  173.                         {% set youtube = videoYoutubeDestacatCentral.youtubeId|split('/embed/') %}
  175.                     <div class="responsive-embed widescreen" style="margin-bottom:0; position:relative; overflow: hidden;">
  176.                         <iframe class="mfp-iframe" src="{{videoYoutubeDestacatCentral.youtubeId}}?autoplay=1&mute=1&controls=0&loop=1&playlist={{youtube[1]}}&rel=0&modestbranding=0?showinfo=1" frameborder="0" allowfullscreen="" style="width:100%; height:100%; position:absolute; top:-60px; bottom:-60px;" scrolling="no"></iframe>
  177.                     </div>
  178.                     {% endif %}
  179.                 {% else %}
  180.                     <div class="slide-home">
  181.                         <div class="orbit" role="region" data-orbit>
  182.                             <div class="orbit-wrapper">
  183.                                 <div class="orbit-controls">
  184.                                     <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
  185.                                     <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
  186.                                 </div>
  187.                                 <ul class="orbit-container">
  188.                                     {% for entity in enFotosHome %}
  189.                                         <li class="is-active orbit-slide">
  190.                                             <figure class="orbit-figure">
  191.                                                 <img class="orbit-image" src="{{ asset('uploads/fotoshome/' ~ entity.rutaImagen)}}" title="{{ attribute(entity, 'titol'~app.request.locale) }}" />
  192.                                                 <figcaption class="orbit-caption">{{ attribute(entity, 'titol'~app.request.locale) }}</figcaption>
  193.                                             </figure>
  194.                                         </li>
  195.                                     {% endfor %}
  196.                                 </ul>
  197.                             </div>
  198.                         </div>
  199.                     </div>
  200.                 {% endif %}
  202.                 <script>
  203.                     function closeApp() {
  204.                         var v = document.getElementById("app-up");
  205.                         if (v.style.display === "none") {
  206.                             v.style.display = "block";
  207.                         } else {
  208.                             v.style.display = "none";
  209.                         }
  210.                     }
  211.                 </script>
  213.                 <script>
  214.                     function closeUp() {
  215.                         var v = document.getElementById("compra-up");
  216.                         if (v.style.display === "none") {
  217.                             v.style.display = "block";
  218.                         } else {
  219.                             v.style.display = "none";
  220.                         }
  221.                     }
  222.                 </script>
  223.                 {%  if general.getComprarVisible() %}
  224.                 <div id="compra-up">
  225.                     <h5>{{ "Compra a Masella" | trans }}</h5>
  226.                     <select name="compra" id="compra">
  227.                         {% if general.getBotigaAbonament() == 1 %}
  228.                             {% if app.request.locale == 'en' or app.request.locale == 'fr' %}
  229.                                 <option value="{{path('abonaments_temporada_front', {'_locale':'ca'})}}" data_target="" selected="selected">{{ "Abonaments temporada" | trans }}</option>
  230.                             {% else %}
  231.                                 <option value="{{path('abonaments_temporada_front')}}#content-page" data_target="" selected="selected">{{ "Abonaments temporada" | trans }}</option>
  232.                             {% endif %}
  233.                         {% endif %}
  234.                         {% if general.getBotigaForfets() == 1 %}
  235.                             {% if app.request.locale == 'en' %}
  236.                                 <option value="https://masella.axess.shop/es/Tickets/Index" data_target="_blank">{{ "Forfets dia i nit" | trans }}</option>
  237.                             {% else %}
  238.                                 {% if app.request.locale == 'fr' %}
  239.                                     <option value="https://masella.axess.shop/fr/Products/Tickets/" data_target="_blank">{{ "Forfets dia i nit" | trans }}</option>
  240.                                 {% else %}
  241.                                 <option value="https://masella.axess.shop/{{app.request.locale}}/Tickets/Index" data_target="_blank">{{ "Forfets dia i nit" | trans }}</option>
  242.                                 {% endif %}
  243.                             {% endif %}
  244.                         {% endif %}
  245.                         {% if general.getBotigaPromocions() == 1 %}
  246.                             <option value="https://masella.axess.shop/{{app.request.locale}}/Tickets#pg1001" data_target="_blank">{{ "Forfets promocions i varis dies" | trans }}</option>
  247.                         {% endif %}
  248.                         {% if general.getBotigaRecarrega() == 1 %}
  249.                             <option value="https://masella.axess.shop/{{app.request.locale}}" data_target="_blank">{{ "Recàrrega forfets" | trans }}</option>
  250.                         {% endif %}
  251.                         {% if general.getBotigaClasses() == 1 %} 
  252.                             <option value="{{path('abonaments_temporada_classes')}}" data_target="">{{ "Classes d'esquí i snowboard" | trans }}</option>
  253.                         {% endif %}
  254.                         {% if general.getBotigaLloguer() == 1 %} 
  255.                             <option value="{{path('abonaments_temporada_botiga')}}" data_target="">{{ "Lloguer i guardaesquís" | trans }}</option>
  256.                         {% endif %}
  257.                     </select>
  258.                     {% if app.request.locale == 'en' or app.request.locale == 'fr' %}
  259.                         <a id="btnCompra" class="button expanded" href="{{path('abonaments_temporada_front', {'_locale':'ca'})}}">{{ "Compra ara" | trans }}</a>
  260.                     {% else %}                    
  261.                         <a id="btnCompra" class="button expanded" href="{{path('abonaments_temporada_front')}}">{{ "Compra ara" | trans }}</a>
  262.                     {% endif %}
  263.                     <strong>{{ "Atenció al client" | trans }}</strong>: &nbsp; <a href="tel:972144000"><i class="fas fa-phone"></i> 972 144 000</a>
  264.                     <a class="close-button"  onclick="closeUp()"><span aria-hidden="true">&times;</span></a>
  265.                 </div>
  266.                 {% endif %}
  267.             </div>
  268.     </div>
  269. {% endblock %}
  272. {% block Webcam360_movil %}
  273.     <div style="position:relative; background:#fff; padding-top:0; margin-top: 4%;">
  274.         <div class="grid-container padding-mobile">
  275.             <div class="large-12 cell">
  276.                 <div class="grid-x grid-padding-x align-middle" style="background:#fff;">
  277.                     <div class="large-12 cell text-center" style="background: #6B9E9A; padding-top:10px; margin-bottom: 0px; margin-top: 10px;">
  278.                         <h2 class="main-heading" style="margin-bottom: 0;"><strong>LiveCam 360&deg;</strong></h2>
  279.                         <h5 class="main-heading">{{"Jumbo Tosa" | trans }}</h5>
  280.                     </div>
  281.                     <div class="large-12 medium-12" style="overflow: hidden;">
  282.                         <!--vertical-->  <div id="roundshot-thumbnail-54e8157b35bf33b39791639580461ee72" class="cam360 si-movil" style="border: 0px solid rgba(10, 10, 10, 0); overflow:hidden;"></div><script src="https://backend.roundshot.com/js/roundshot_animated_thumbnail.js" type="text/javascript"></script><script type="text/javascript"> roundshot.animate({id: "54e8157b35bf33b39791639580461ee72", picture: "https://backend.roundshot.com/cams/54e8157b35bf33b39791639580461ee7/thumbnail", link: "https://masella.roundshot.com/", angle: 360, width: 600, height: 160, bounce: false, open_in_new_tab: true, speed: 20});</script>
  283.                     </div>
  284.                     <div class="large-12 cell text-center">
  285.                         <a href="{{path('webcam')}}" class="button large" style="background:#fff; color:#6B9E9A; padding:0.2rem 1rem 1rem 1rem; font-size: 1.8rem; border-bottom: solid 2px #6B9E9A;"><img src="{{asset('frontoffice/images/webcam-green.svg')}}"/> <strong>{{ "Webcams" | trans }}</strong></a>
  286.                     </div>
  287.                 </div>
  288.             </div>
  289.         </div>
  290.     </div>
  291. {% endblock %}
  293. {% block Webcam360 %}
  294.     <div style="position:relative; background:#fff; padding-top:1rem;">
  295.         <div class="grid-container padding-mobile">
  296.             {% if general.getWebcam360CapBoscVisible()  %}
  297.                 <div class="large-12 cell">
  298.                     <div class="grid-x grid-padding-x align-middle mobile-wide">
  299.                         <div class="large-6 medium-6 small-6 cell">
  300.                             <h3 class="main-heading">LiveCam 360&deg;</h3>
  301.                             <h5 class="main-heading">{{"Jumbo Tosa" | trans }}</h5>
  302.                         </div>
  303.                         <div class="large-6 medium-6 small-6 cell">
  304.                             <a href="{{path('webcam')}}" class="button large"><img src="{{asset('frontoffice/images/webcam.svg')}}"/> {{ "Webcams" | trans }}</a>
  305.                         </div>
  306.                         <div class="large-12 medium-12 cell" style="overflow: hidden;">
  307.                             <!--horizontal--><div id="roundshot-thumbnail-54e8157b35bf33b39791639580461ee7" class="cam360 no-movil" style="border: 1px solid rgba(10, 10, 10, 0.25);"></div><script src="https://backend.roundshot.com/js/roundshot_animated_thumbnail.js" type="text/javascript"></script><script type="text/javascript"> roundshot.animate({id: "54e8157b35bf33b39791639580461ee7", picture: "https://backend.roundshot.com/cams/54e8157b35bf33b39791639580461ee7/thumbnail", link: "https://masella.roundshot.com/", angle: 360, width: 1174, height: 449, bounce: false, open_in_new_tab: true, speed: 20});</script>
  308.                             <p class="no-movil" style="text-align: center; margin-bottom: 2rem;">{{"Clicar la imatge" | trans }}</p>
  309.                         </div>
  310.                     </div>
  311.                 </div>  
  312.             {% endif %}
  313.         </div>
  314.     </div>
  315. {% endblock %}
  318. {% block article_movil %}
  319.     <div style="position:relative; background:#fff;">
  321.         <div class="grid-x grid-padding-x" data-equalizer="foo">
  322.             <!-- Slider main container -->
  323.             <!--
  324.             <div class="swiper" style="width:100%;height: 700px;  padding-top:0;">
  325.             -->
  326.             <div class="swiper" style="width:100%;  padding-top:0;">
  327.                 <!-- Additional required wrapper -->
  328.                 <div class="swiper-wrapper">
  329.                     {% for pestanya in enPestanyes %}
  330.                         <div class="small-12 pestanya swiper-slide">
  331.                             {% if attribute(pestanya, 'link'~(app.request.locale|capitalize)) !='' %}
  332.                                 <a href="{{attribute(pestanya, 'link'~(app.request.locale|capitalize))}}" target="_blank">
  333.                                 {% endif %}
  334.                                 <div class="callout" style="position:relative; padding: 0;">
  335.                                     <div class="top-pestanya">
  336.                                         <h2 class="text-left"><strong>{{ "Descobreix Masella" | trans }}</strong></h2>
  337.                                         <h4 class="text-left">{{attribute(pestanya, 'titol'~(app.request.locale|capitalize))}}</h4>
  338.                                         {{attribute(pestanya, 'text'~(app.request.locale|capitalize))|raw}}
  339.                                     </div>
  340.                                     {% if pestanya.imatge != '' %}
  341.                                         <div class="img-pestanya" style="background-image: url('{{ asset('uploads/pestanyes/'~pestanya.imatge) }}');">
  342.                                             <img class="img-pestanya_int"src="{{asset('frontoffice/images/mobile-vertical.gif')}}" />
  343.                                         </div>
  344.                                     {% endif %}
  345.                                 </div>
  346.                                 {% if attribute(pestanya, 'link'~(app.request.locale|capitalize)) !='' %}
  347.                                 </a>
  348.                             {% endif %}
  349.                         </div>
  350.                     {% endfor %}
  351.                 </div>
  352.                 <!-- If we need pagination -->
  353.                 <div class="swiper-pagination" style="top:80%;"></div>
  354.                 <!-- If we need navigation buttons -->
  355.                 <!--
  356.                 <div class="swiper-button-prev"></div>
  357.                 <div class="swiper-button-next"></div>
  358.                 -->
  359.                 <!-- If we need scrollbar
  360.                 <div class="swiper-scrollbar"></div> -->
  361.             </div>
  362.         </div>
  363.     </div>
  366. {% endblock %}
  368. {% block article %}
  369.     <div style="position:relative; background:#fff;">
  370.         <div class="grid-container padding-mobile">
  372.             {% set col=0%}   
  373.             {#% if videoDestacat.codi is defined and videoDestacat.codi !='' %} {% set col=col+1 %} {% endif %#} 
  374.             {#% if general.pestanya1Visible %} {% set col=col+1 %} {% endif %}
  375.             {% if general.pestanya2Visible %} {% set col=col+1 %} {% endif %}
  376.             {% if general.pestanya3Visible %} {% set col=col+1 %} {% endif %}
  377.             {% if general.pestanya4Visible %} {% set col=col+1 %} {% endif %#}
  378.             {% if sFotoDelDia is not empty %} {% set col=col+1 %} {% endif %}
  380.             <h3 class="text-center">{{ "Descobreix Masella" | trans }}</h3>
  381.             <div class="slide-home">
  382.                 <div class="orbit" role="region" data-orbit>
  383.                     <div class="orbit-wrapper">
  384.                         <div class="orbit-controls">
  385.                             <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
  386.                             <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
  387.                         </div>
  388.                         <ul class="orbit-container bloques">
  389.                             {% set iIcon = 0 %}
  390.                             {% for pestanya in enPestanyes %}
  391.                                 {% set iIcon=iIcon+1 %}
  392.                                 {% if (iIcon == 1) %}
  393.                                     <li class="is-active orbit-slide">
  394.                                         <div class="grid-x grid-padding-x" data-equalizer="foo">
  395.                                         {% endif %}
  396.                                         <div class="large-4 medium-4 pestanya" style="min-height: 286px!important;">
  397.                                             {% if attribute(pestanya, 'link'~(app.request.locale|capitalize)) !='' %}
  398.                                                 <a href="{{attribute(pestanya, 'link'~(app.request.locale|capitalize))}}" target="_blank">
  399.                                                 {% endif %}
  400.                                                 <div class="callout" data-equalizer-watch="foo" style="position:relative; min-height: 286px!important;">
  401.                                                     <h5>{{attribute(pestanya, 'titol'~(app.request.locale|capitalize))}}</h5>
  402.                                                     {{attribute(pestanya, 'text'~(app.request.locale|capitalize))|raw}}
  403.                                                     {% if pestanya.imatge != '' %}
  404.                                                         <div class="img-pestanya" style="background-image: url('{{ asset('uploads/pestanyes/'~pestanya.imatge) }}');">
  405.                                                             <img src="{{asset('frontoffice/images/pc-vertical.gif')}}" />
  406.                                                         </div>
  407.                                                     {% endif %}
  408.                                                 </div>
  409.                                                 {% if attribute(pestanya, 'link'~(app.request.locale|capitalize)) !='' %}
  410.                                                 </a>
  411.                                             {% endif %}
  412.                                         </div>
  413.                                         {% if (iIcon == 3) %}
  414.                                             {% set iIcon = 0%}
  415.                                         </div>
  416.                                     </li>
  417.                                 {% endif %}
  418.                             {% endfor %}
  419.                             {% if (iIcon != 0) %}
  420.                         </div>
  421.                         </li>
  422.                     {% endif %}
  423.                     </ul>
  424.                 </div>
  425.             </div>
  426.         </div>
  427.     </div>
  428.     {#% include 'App::foot.html.twig' %#}
  430. {% endblock %}
  432. {% block javascripts %}
  433.     {{parent()}}
  435.     <script type="text/javascript">
  437.         {%if errors is defined and errors|length>0%}
  438.             alert("hay errores")
  439.         {%endif%}
  441.             $(function () {
  442.                 $(".swiper").css('height', $(window).height() + 'px');
  443.                 $(".img-pestanya_int").css('height', ($(window).height() - 220) + 'px');
  444.                 $('#compra').on('change', function (e) {
  445.                     $('#btnCompra').attr('href', $(this).val()).attr('target', $('option:selected', this).attr('data_target'));
  446.                 })
  447.             })
  449.             var swiper = new Swiper('.swiper', {
  450.                 // Optional parameters
  451.                 direction: 'horizontal',
  452.                 loop: true,
  454.                 // If we need pagination
  455.                 pagination: {
  456.                     el: '.swiper-pagination',
  457.                 },
  459.                 // Navigation arrows
  460.                 navigation: {
  461.                     nextEl: '.swiper-button-next',
  462.                     prevEl: '.swiper-button-prev',
  463.                 },
  465.                 // And if we need scrollbar
  466.                 scrollbar: {
  467.                     el: '.swiper-scrollbar',
  468.                 },
  469.             });
  471.     </script>
  472. {% endblock%}