templates/Theme/Produit/Service/Service/interventions.html.twig line 1

Open in your IDE?
  1. {% extends "Theme/Users/User/layoutbase.html.twig" %}
  2. {% block meta %}
  3.     {{ parent() }}
  4.     <meta name="keywords" content="{{ site }}, "/>
  5.     <meta name="author" content="Noel Kenfack"/>
  6.     <meta name="description" content="{{ site }}"/>
  7. {% endblock %}
  9. {% block title %}
  10.     {{ parent() }}
  11.     - Détails du service ..
  12. {% endblock %}
  14. {% block userblog_body %}
  15.     {# <!-- page title -->
  16.     <section class="page-title-section overlay">
  17.         <div class="container">
  18.             <div class="row">
  19.                 <div class="col-md-12">
  20.                     {% if aboutIntervention != null %}
  21.                         <h2 style="color: #fff;">{{ aboutIntervention.title }}</h2>
  22.                         <p>{{ aboutIntervention.valeur }}</p>
  23.                     {% else %}
  24.                         <p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita valies darta donna mare fermentum iaculis eu non diam phasellus.</p>
  25.                     {% endif %}
  26.                 </div>
  27.             </div>
  28.         </div>
  29.     </section>
  30.     <!-- /page title -->#}
  32.     {# Start Breadcrumbs #}
  33.     <style>
  34.     .content{
  35.         background-color: #268dcf;
  36.     }
  37.         .wrap {
  38.             padding-top: 8px;
  39.             padding-bottom: 8px;
  40.             box-shadow: 0 5px 5px #fff;
  41.         }
  42.         .breadcrumb {
  43.             width: 100%;
  44.             margin: auto;
  45.             display: flex;
  46.         }
  47.         .breadcrumb li {
  48.             padding-right: 20px;
  49.         }
  50.         .breadcrumb a {
  51.             text-decoration: none;
  52.             color: aliceblue;
  53.             font-weight: 700;
  54.             transition: 0.5s;
  55.         }
  56.         .breadcrumb li + li {
  57.             padding-left: 0;
  58.         }
  59.         .breadcrumb li + li:before {
  60.             content: '>';
  61.             color: #3b3b3bff;
  62.             margin-right: 20px;
  63.         }
  64.         .breadcrumb li:last-child a,
  65.         .breadcrumb a:hover {
  66.             color: #e2ebf3;
  67.             border-radius: 35px;
  68.             background-color: #82ccdd;
  69.             padding: 5px 10px;
  70.         }
  71.         {# End Breadcrumb #}
  73.         {# card #}
  74.         :root {
  75.   --swiper-pagination-color: #fff;
  76.   --swiper-pagination-bullet-inactive-color: #fff;
  77. }
  79. {# html{
  80.     box-sizing: border-box;
  81. } #}
  83. {# *, *:after,*:before{
  84.     box-sizing: border-box; 
  85. }#}
  87. {# body {
  88.   width: 100%;
  89.   min-width: 350px;
  90.   display: flex;
  91.   justify-content: center;
  92.   align-items: center;
  93.   margin: 0;
  94.   padding: 0;
  95.   background: #fff;
  96.   font-family: sans-serif;
  97.   font-size: 14px;
  98.   color: #000;
  99.   user-select: none;
  100.   -moz-user-select: none;
  101.   -webkit-user-select: none;
  102.   -ms-user-select: none;
  103. } #}
  105. .wrapper {
  106.   width: 100%;
  107.   overflow-x: hidden;
  108.   padding-top: 20px;
  109.   padding-bottom: 0px;
  110.   /*display: flex;
  111.   flex-flow: row wrap;
  112.   justify-content: center;
  113.   align-items: center;
  114.   @media (max-width: 1199px) {
  115.     flex-flow: column;
  116.   }*/
  117. }
  119. .swiper {
  120.   width: 300px;
  121.   height: 400px;
  122.   margin: 0px;
  123.   border-radius: 15px;
  124. }
  126. .swiper-slide {
  127.   text-align: center;
  128.   font-size: 18px;
  129.   background: #000;
  130.   width: 100%;
  131.   height: 100%;
  132.   img {
  133.     width: 100%;
  134.     height: 100%;
  135.     object-fit: cover;
  136.     opacity: 0.9;
  137.   }
  138.   .card-image {
  139.     position: relative;
  140.     transition: opacity 0.3s ease-out;
  141.     width: 100%;
  142.     height: 100%;
  143.   }
  144.   .card-description {
  145.     position: absolute;
  146.     z-index: 100;
  147.     top: 0;
  148.     left: 0;
  149.     display: flex;
  150.     flex-flow: column;
  151.     justify-content: flex-end;
  152.     width: 100%;
  153.     height: 100%;
  154.     padding: 20px;
  155.     color: #fff;
  156.     &:before {
  157.       content: "";
  158.       position: absolute;
  159.       z-index: 9;
  160.       top: 0;
  161.       left: 0;
  162.       width: 100%;
  163.       height: 100%;
  164.       background: rgb(255,255,255);
  165.       background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(0,0,0,0.5) 100%);
  166.     }
  167.     h1, p {
  168.       position: relative;
  169.       z-index: 10;
  170.       text-align: left;
  171.     }
  172.     h1 {
  173.       font-size: 28px;
  174.       margin-top: 0;
  175.       margin-bottom: 5px;
  176.     }
  177.     p {
  178.       margin-top: 0;
  179.       letter-spacing: 1px;
  180.     }
  181.   }
  182. }
  184. .swiper-button-next,
  185. .swiper-button-prev {
  186.   color: #000;
  187.   &::after {
  188.     font-size: 20px;
  189.   }
  190. }
  192. .swiperEffect {
  193.   border-radius: 0;
  194.   .swiper-slide {
  195.     border-radius: 18px;
  196.   }
  197.   .swiper-button-next,
  198.   .swiper-button-prev {
  199.     color: #fff;
  200.   }
  201. }
  203. {# css indice sections  #}
  204.     .section-head.center.wt-small-separator-outer {
  205.         margin-bottom: 50px;
  206.         text-align: left;
  207.     }
  208.     .section-head {
  209.         position: relative;
  210.     }
  211.     .site-text-primary, .wt-small-separator {
  212.         color: #ea130e;
  213.     }
  214.     .wt-small-separator {
  215.         font-family: "Heebo", sans-serif;
  216.         text-transform: uppercase;
  217.         letter-spacing: 1px;
  218.         padding-right: 40px;
  219.         font-size: 26px;
  220.         line-height: 26px;
  221.         margin-bottom: 15px;
  222.         position: relative;
  223.         display: inline-block;
  224.         font-weight: 700;
  225.     }
  226.     .section-head.center .wt-small-separator div.sep-leaf-left {
  227.         position: relative;
  228.     }
  229.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  230.         background-color: #ea130e;
  231.     }
  232.     .section-head.center .wt-small-separator div.sep-leaf-left:before {
  233.         right: -20px;
  234.         width: 10px;
  235.     }
  236.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  237.         position: absolute;
  238.         content: '';
  239.         height: 22px;
  240.         bottom: 0px;
  241.         top: 0px;
  242.         transform: skew(-20deg);
  243.     }
  244.     .section-head.center .wt-small-separator div.sep-leaf-left:after {
  245.         right: -27px;
  246.         width: 4px;
  247.     }
  248.     .section-head.center.wt-small-separator-outer h2 {
  249.         max-width: 630px;
  250.         margin: 0px auto;
  251.     }
  252. </style>
  254. <!-- CTA Section -->
  255. <section class="cta " style="padding: 1rem 0;">
  256.     <div class="container">
  257.         <div class="section-head center wt-small-separator-outer mt-3 text-center" style="margin-bottom: 0px;">
  258.             <div class="wt-small-separator site-text-primary">
  259.                 <div class="sep-leaf-left"></div>
  260.                 <div>Nos interventions</div>
  261.             </div>
  262.         </div>
  263.         <div>Nous proposons des services de comptabilité, incluant la tenue de livres, les déclarations fiscales, l'élaboration de bilans, et des conseils financiers. Notre expertise assure la conformité et l’optimisation de votre gestion financière.</div>
  264.     </div>
  265. </section>
  267.     <!-- more event -->
  268.     <section class="section-sm">
  269.         <div class="content" style="padding-bottom: 5px;">
  270.             <div class="wrap">
  271.                 <div class="container">
  272.                     <ol class="breadcrumb">
  273.                         <li href="#">
  274.                             <a>Home</a>
  275.                         </li>
  276.                         <li href="#">
  277.                             <a>Portoflio</a>
  278.                         </li>
  279.                     </ol>
  280.                 </div>
  281.             </div>
  282.         </div>
  284.         <div class="container">
  286.             <div class="faq active">
  287.               <h3 class="faq-title">
  288.                 DSF de Stat-pro <span style="color: red;">2021</span> 
  289.               </h3>
  291.               <p class="faq-text">
  292.                 Notre engagement se concentre sur la fourniture de services de qualité, respectant l’intégrité et la transparence, afin de soutenir les clients dans l'atteinte de leurs objectifs financiers.
  293.                 <h4 class="mb-3">Activités effectuées</h4>
  294.                 <div class="row">
  295.                     <div class="col-md-4">
  296.                         
  297.                         <div class="d-flex align-items-center mb-3">
  298.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  299.                                 <span class="fs-4">✓</span>
  300.                             </div>
  301.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  302.                         </div>
  303.                     </div>
  305.                     <div class="col-md-4">
  306.                         <div class="d-flex align-items-center mb-3">
  307.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  308.                                 <span class="fs-4">✓</span>
  309.                             </div>
  310.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  311.                         </div>
  312.                     </div>
  314.                     <div class="col-md-4">
  315.                         <div class="d-flex align-items-center mb-3">
  316.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  317.                                 <span class="fs-4">✓</span>
  318.                             </div>
  319.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  320.                         </div>
  321.                     </div>
  323.                     <div class="col-md-4">
  324.                         <div class="d-flex align-items-center mb-3">
  325.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  326.                                 <span class="fs-4">✓</span>
  327.                             </div>
  328.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  329.                         </div>
  330.                     </div>
  331.                 </div>
  334.               </p>
  335.               <button class="faq-toggle">
  336.                 <i class="bi bi-chevron-down"></i>
  337.                 <i class="fas fa-times"></i>
  338.               </button>
  339.             </div>
  341.             <div class="faq active">
  342.               <h3 class="faq-title">
  343.                 DSF de Stat-pro <span style="color: red;">2021</span> 
  344.               </h3>
  346.               <p class="faq-text">
  347.                 Notre aspiration est de devenir un leader dans le secteur, en innovant et en adaptant nos pratiques pour anticiper les besoins des clients et améliorer leur expérience.
  348.                 <h4 class="mb-3">Activités effectuées</h4>
  349.                 <div class="row mt-3">
  350.                     <div class="col-md-4">
  351.                         <div class="d-flex align-items-center mb-3">
  352.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  353.                                 <span class="fs-4">✓</span>
  354.                             </div>
  355.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  356.                         </div>
  357.                     </div>
  359.                     <div class="col-md-4">
  360.                         <div class="d-flex align-items-center mb-3">
  361.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  362.                                 <span class="fs-4">✓</span>
  363.                             </div>
  364.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  365.                         </div>
  366.                     </div>
  368.                     <div class="col-md-4">
  369.                         <div class="d-flex align-items-center mb-3">
  370.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  371.                                 <span class="fs-4">✓</span>
  372.                             </div>
  373.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  374.                         </div>
  375.                     </div>
  377.                     <div class="col-md-4">
  378.                         <div class="d-flex align-items-center mb-3">
  379.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  380.                                 <span class="fs-4">✓</span>
  381.                             </div>
  382.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  383.                         </div>
  384.                     </div>
  385.                 </div>
  387.               </p>
  388.               <button class="faq-toggle">
  389.                 <i class="bi bi-chevron-down"></i>
  390.                 <i class="fas fa-times"></i>
  391.               </button>
  392.             </div>
  394.             <div class="faq active">
  395.               <h3 class="faq-title">
  396.                 DSF de Stat-pro <span style="color: red;">2021</span> 
  397.               </h3>
  399.               <p class="faq-text">
  400.                 Nos valeurs sont l'intégrité, la précision, la transparence, le respect des délais et la responsabilité, garantissant des services fiables et un soutien efficace à tous nos clients.
  401.                 <h4 class="mb-3">Activités effectuées</h4>
  402.                 <div class="row mt-3">
  403.                     <div class="col-md-4">
  404.                         <div class="d-flex align-items-center mb-3">
  405.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  406.                                 <span class="fs-4">✓</span>
  407.                             </div>
  408.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  409.                         </div>
  410.                     </div>
  412.                     <div class="col-md-4">
  413.                         <div class="d-flex align-items-center mb-3">
  414.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  415.                                 <span class="fs-4">✓</span>
  416.                             </div>
  417.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  418.                         </div>
  419.                     </div>
  421.                     <div class="col-md-4">
  422.                         <div class="d-flex align-items-center mb-3">
  423.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  424.                                 <span class="fs-4">✓</span>
  425.                             </div>
  426.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  427.                         </div>
  428.                     </div>
  430.                     <div class="col-md-4">
  431.                         <div class="d-flex align-items-center mb-3">
  432.                             <div class="bg-success text-white rounded-circle d-flex justify-content-center align-items-center p-3 me-2" style="width: 40px; height: 40px;">
  433.                                 <span class="fs-4">✓</span>
  434.                             </div>
  435.                             <span>Sécuriser juridiquement les activités des entreprises</span>
  436.                         </div>
  437.                     </div>
  438.                 </div>
  439.               </p>
  440.               <button class="faq-toggle">
  441.                 <i class="bi bi-chevron-down"></i>
  442.                 <i class="fas fa-times"></i>
  443.               </button>
  444.             </div>
  447.             <div class="wrapper"> 
  448.                  <div class="row">
  449.                     {% for intervention in liste_interventions %}
  450.                     <div class="col-lg-4 col-md-6 col-sm-12">
  451.                         <div class="swiper swiperFade mb-5">
  452.                             <div class="swiper-wrapper">
  453.                                 <div class="swiper-slide">
  454.                                     {% set images_portfolio = intervention.getFirstImages() %}
  455.                                     {% for portfolio in images_portfolio %}
  456.                                     <div class="card-image">
  457.                                         <a data-fancybox="demo" data-src="{{ vich_uploader_asset(portfolio) }}" data-caption="{{ portfolio.title }}"><img src="{{ vich_uploader_asset(portfolio) }}" style="width: 100%;"></a>
  458.                                         <div class="card-description">
  459.                                             <h1>{{ intervention.name }}</h1>
  460.                                             <p>{{ intervention.description }}</p>
  461.                                         </div>
  462.                                     </div>
  463.                                     {% endfor %}
  464.                                 </div>
  465.                             </div>
  466.                             <div class="swiper-button-next"></div>
  467.                             <div class="swiper-button-prev"></div>
  468.                             <div class="swiper-pagination"></div>
  469.                         </div>
  470.                         {# <div>
  471.                             <p>Title</p>
  472.                         </div> #}
  473.                     </div>
  474.                     {% endfor %}
  476.                 {# <div class="container">
  477.                     <div class="accordion accordion-flush aos-init aos-animate" id="faqlist" data-aos="fade-up" data-aos-delay="100">
  478.                         {% for intervention in liste_interventions %}
  479.                             <div class="accordion-item">
  480.                                 <h3 class="accordion-header">
  481.                                     <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-{{ intervention.id }}" aria-expanded="{% if loop.first %}true{% else %}false{% endif %}">
  482.                                         {{ intervention.name }}
  483.                                     </button>
  484.                                 </h3>
  485.                                 <div id="faq-content-{{ intervention.id }}" class="accordion-collapse {% if loop.first %}collapse show{% endif %}" data-bs-parent="#faqlist">
  486.                                     <div class="accordion-body">
  487.                                         <div class="mb-2">
  488.                                             {{ intervention.description }}
  489.                                         </div>
  491.                                         <div class="grid imglist">
  492.                                             <div class="row padding-bottom--sm">
  493.                                                 {% set images_portfolio = intervention.getFirstImages() %}
  494.                                                 {% for portfolio in images_portfolio %}
  495.                                                     <div class="col col--4">
  496.                                                         <a data-fancybox="demo" data-src="{{ vich_uploader_asset(portfolio) }}" data-caption="{{ portfolio.title }}"><img src="{{ vich_uploader_asset(portfolio) }}" style="width: 100%;"></a>
  497.                                                     </div>
  498.                                                 {% endfor %}
  499.                                             </div>
  500.                                         </div>
  502.                                     </div>
  503.                                 </div>
  504.                             </div>
  505.                             <!-- # Faq item-->
  506.                         {% endfor %}
  507.                     </div>
  509.                 </div> #}
  513.                 {# <div class="swiper swiperVertical">
  514.                     <div class="swiper-wrapper">
  515.                     <div class="swiper-slide"> 
  516.                         <div class="card-image"><img src="https://images.pexels.com/photos/11678736/pexels-photo-11678736.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
  517.                         <div class="card-description">
  518.                             <h1>Hanoi</h1>
  519.                             <p>Vietnam</p>
  520.                         </div>
  521.                         </div>
  522.                     </div>
  523.                     <div class="swiper-slide">
  524.                         <div class="card-image"><img src="https://images.pexels.com/photos/16551415/pexels-photo-16551415/free-photo-of-thanh-ph-d-ng-chan-tr-i-toa-nha-van-phong.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
  525.                         <div class="card-description">
  526.                             <h1>Ho Chi Minh City</h1>
  527.                             <p>Vietnam</p>
  528.                         </div>
  529.                         </div>
  530.                     </div>
  531.                     <div class="swiper-slide"> 
  532.                         <div class="card-image"><img src="https://images.pexels.com/photos/14435439/pexels-photo-14435439.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"/>
  533.                         <div class="card-description">
  534.                             <h1>Danang</h1>
  535.                             <p>Vietnam</p>
  536.                         </div>
  537.                         </div>
  538.                     </div>
  539.                     </div>
  540.                     <div class="swiper-pagination"></div>
  541.                 </div> #}
  542.             </div>
  543.         </div>
  544.         {#</div>#}
  545.     </section>
  546. <!-- /more event -->
  547. <div class="text-center" style="margin-top: 30px; margin-bottom: 60px;">
  548.     {% if nombrepage > 0 %}
  550.         {% if page > 1 and page <= nombrepage %}
  551.             {% set pagepre = page - 1 %}
  552.         {% else %}
  553.             {% set pagepre = nombrepage %}
  554.         {% endif %}
  556.         {% if page < nombrepage %}
  557.             {% set pagesuiv = page + 1 %}
  558.         {% else %}
  559.             {% set pagesuiv =  1 %}
  560.         {% endif %}
  562.         {% if nombrepage < 5 %}
  563.             {% set debut = 1 %}
  564.             {% set fin = nombrepage %}
  565.         {% else %}
  566.             {% if page > 2 and page < (nombrepage - 2) %}
  567.                 {% set debut = page - 2 %}
  568.                 {% if page + 2 >= nombrepage %}
  569.                     {% set fin = nombrepage %}
  570.                 {% else %}
  571.                     {% set fin = page + 2 %}
  572.                 {% endif %}
  573.             {% else %}
  574.                 {% if page <= 2 %}
  575.                     {% if page == 1 %}
  576.                         {% set debut = 1 %}
  577.                         {% set fin = page + 3 %}
  578.                     {% else %}
  579.                         {% set debut = 1 %}
  580.                         {% set fin = page + 2 %}
  581.                     {% endif %}
  582.                 {% else %}
  583.                     {% set debut = page - 2 %}
  584.                     {% if page + 2 >= nombrepage %}
  585.                         {% set fin = nombrepage %}
  586.                     {% else %}
  587.                         {% set fin = page + 2 %}
  588.                     {% endif %}
  589.                 {% endif %}
  590.             {% endif %}
  592.         {% endif %}
  594.         <div class="btn-group mb-4 text-center" role="group" aria-label="Basic example">
  595.             <a href="{{ path('produit_service_galery', {'page': 1 }) }}" title="Première page" class="btn btn-outline-primary mx-2">
  596.                 <span><i class="bi bi-chevron-double-left"></i></span>
  597.             </a>
  598.             <a href="{{ path('produit_service_galery', {'page': pagepre }) }}" title="Page précedente" class="btn btn-outline-primary mx-2">
  599.                 <span><i class="bi bi-chevron-left"></i></span>
  600.             </a>
  601.             {% for p in debut..fin %}
  602.                 <a href="{{ path('produit_service_galery', {'page': p }) }}" value="{{ p }}" class="btn btn-outline-primary mx-2 {% if p == page %}active{% endif %}">{{ p }}</a>
  603.             </li>
  604.         {% endfor %}
  605.         <a href="{{ path('produit_service_galery', {'page': pagesuiv }) }}" title="Page suivante" class="btn btn-outline-primary mx-2">
  606.             <span><i class="bi bi-chevron-right"></i></span>
  607.         </a>
  608.         <a href="{{ path('produit_service_galery', {'page': nombrepage }) }}" title="Dernière page" class="btn btn-outline-primary mx-2">
  609.             <span><i class="bi bi-chevron-double-right"></i></spam>
  610.         </a>
  611.     </div>
  612.     <div class="clearfix"></div>
  613. {% else %}
  614.     <div class="btn-group mb-4 text-center" role="group" aria-label="Basic example">
  615.         <a href="{{ path('produit_service_galery', {'page': page }) }}" title="Première page" class="btn btn-outline-primary mx-2">
  616.             <span><i class="bi bi-chevron-double-left"></i></span>
  617.         </a>
  618.         <a href="{{ path('produit_service_galery', {'page': page }) }}" title="Page précedente" class="btn btn-outline-primary mx-2">
  619.             <span><i class="bi bi-chevron-left"></i></span>
  620.         </a>
  622.         <a href="{{ path('produit_service_galery', {'page': page }) }}" class="btn btn-outline-primary mx-2 active" style="margin: 4px 0px;">0</a>
  624.         <a href="{{ path('produit_service_galery', {'page': page }) }}" title="Page suivante" class="btn btn-outline-primary mx-2">
  625.             <span><i class="bi bi-chevron-right"></i></span>
  626.         </a>
  627.         <a href="{{ path('produit_service_galery', {'page': page }) }}" title="Dernière page" class="btn btn-outline-primary mx-2">
  628.             <span><i class="bi bi-chevron-double-right"></i></spam>
  629.         </a>
  630.     </div>
  631.     <div class="clearfix"></div>
  635. <script>
  636.     var swiperFade = new Swiper(".swiperFade", {
  637.     loop: true,
  638.     effect: 'fade',
  639.     navigation: {
  640.       nextEl: ".swiper-button-next",
  641.       prevEl: ".swiper-button-prev"
  642.     },
  643.     pagination: {
  644.       el: ".swiper-pagination",
  645.     },
  646.     });
  648.     var swiperVertical = new Swiper(".swiperVertical", {
  649.       loop: true,
  650.       effect: 'fade',
  651.       direction: "vertical",
  652.       pagination: {
  653.         el: ".swiper-pagination",
  654.         clickable: true,
  655.       }
  656.     });
  658.     var swiperEffect = new Swiper(".swiperEffect", {
  659.       loop: true,
  660.       effect: "cards",
  661.       grabCursor: true,
  662.       navigation: {
  663.         nextEl: ".swiper-button-next",
  664.         prevEl: ".swiper-button-prev"
  665.       },
  666.       pagination: {
  667.         el: ".swiper-pagination",
  668.       },
  669.     });
  670. </script>
  671. {% endif %}
  672. </div>
  674. {% endblock %}
  676. {% block javascripttemplate %}
  678. Fancybox.bind('[data-fancybox="demo"]', {
  679.     caption: function (fancybox, carousel, slide) {
  680.       return (
  681.         `${slide.index + 1} / ${carousel.slides.length}
  682. <br/>` + slide.caption
  683.       );
  684.     },
  685.   });
  686. {% endblock %}